How to enable save button when at least one checkbox is checked using angular2

I have several checkboxes and a save button. When I check any of checkbox

, there save button

should be b enabled

and then the save button should be disabled

. I am using the working plunger link. It works in plunker, but not with my code. Please, help.

HTML code:

<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6" *ngFor="let category of categories_checkbox">
                    <md-checkbox name="check" [(ngModel)]="category.checked" checked="category.checked">{{category.categoryName}}</md-checkbox>
                </div>
<button md-raised-button class="md-raised color-white" (click)="postCategory(categories_checkbox)" [disabled]= "!category.checked" style="width: 46%;margin: 10px 5px;">Save</button>

      

ts code:

 addCategorypopup() {
  this.addCategory.show();
  this.ApiService
      .getRestCategory(this.department._id)
      .subscribe(
        categories  => {
          this.categories_checkbox = categories;
        },
        error => {
          //console.log(error);
        });
}

newcat() {
  this.addCat = true;
}

saveCategory(category) {
  category.department_id = this.department._id;
  category.active = true;
  this.addCat = false;
  this.ApiService
      .addCatergory(category)
      .subscribe(
        categories  => {
          //
        },
        error => {
          //console.log(error);
        });
}



 checkedState() {
       console.log('checkedState() called');
       return !this.categories_checkbox.some(_ => _category.checked);
     }
postCategory(categories_checkbox) {
  console.log(categories_checkbox)
 var checked_array = [];
 categories_checkbox.map(function(arr) {
   if(arr.checked) {
     checked_array.push(arr);
   }
 })
 var total = checked_array.length;
for(var i=0; i<checked_array.length; i++) {
  var data = {
     "department_id": this.department._id,
     "category_id":checked_array[i]._id,
     "showClients":true
    }
  this.ApiService
      .addDepartmentCatergory(data)
      .subscribe(
        categories  => {
         total = total -1;
         if(total <= 0) {
           this.toasterService.pop('success', 'Successfully Added');
           this.addCategory.hide();
           this.ApiService
               .getCategory(this.department._id) 
               .subscribe(
                 categories  => {
                   this.categoryLists = categories;
                 },
                 error => {
                   //console.log(error);
                 });           
         }
        },
        error => {
          //console.log(error);
        });
}
}

      

But in ts code, it shows error for word some

. The error says that the property "some" does not exist on type Object.

JSON:

(4) [Object, Object, Object, Object]
0:Object
active:true
categoryName:"Manager1"
company_id:37
_id:22
__proto__:Object
1:Object
active:true
categoryName:"Manager2"
company_id:37
_id:23
__proto__:Object
2:Object
active:true
categoryName:"fbfcbfc"
company_id:37
_id:25
__proto__:Object
3:Object
active:true
categoryName:"hh"
company_id:37
_id:27
__proto__:Object
length:4
__proto__:Array(0)

      

This is my plunker link: http://plnkr.co/edit/mGXBnBA34XLz3w2rZSk6?p=preview

+3


source to share





All Articles