如何使用angular2选中至少一个复选框时启用保存按钮

时间:2017-07-06 06:23:43

标签: angular

我有几个复选框和一个保存按钮。当我检查checkbox中的任何一个save button必须b enabled时,保存按钮应为disabled。我正在分享工作plunker的链接。它在plunker工作,但不是我的代码。请帮忙。

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代码:

 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);
        });
}
}

但在ts代码中,它显示单词some的错误。 该错误称财产&#39;某些&#39;在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)

这是我的plunker链接:http://plnkr.co/edit/mGXBnBA34XLz3w2rZSk6?p=preview

0 个答案:

没有答案