1つまたは複数のチェックボックスがオンになっている場合、送信ボタンを有効にするにはどうすればよいですか？

Question

私はここでマークの解決策を行った：Angular2, disable button if no checkbox selected しかし、私は1つ以上の配列を持っている、どのようにリンクのコードを変更するのですか？

またはこれを行うための他の解決策をお持ちの方？私はangularJs 2でこれを行いたいと思っています。&多くのクラス（配列）を持っています&これらのクラスの科目の数は&です。それぞれの科目はチェックボックスに対応していますボタンを有効にする必要があります。ここで は今それが唯一のclass1を考慮し、コードです：

import {bootstrap} from 'angular2/platform/browser'; 

    import {Component} from 'angular2/core' 

    @Component({ 
     selector: 'my-app', 
     template: ` 
     <label *ngFor="let cb of class1"> 
      <input type="checkbox" [(ngModel)]="cb.state">{{cb.label}}<br/> 
     </label><br/> 
      <label *ngFor="let cb of class6"> 
      <input type="checkbox" [(ngModel)]="cb.state">{{cb.label}}<br/> 
     </label> 
     <p><button [disabled]="buttonState()">button</button></p> 
     ` 
    }) 
    class App { 

     class1 = [{label: 'English(class1-5)'},{label: 'Maths(class1-5)'}]; 

     class6 = [{label: 'English(class6-8)'},{label: 'Maths(class6-8)'}]; 


     buttonState() { 

     console.log('buttonState() called'); 

     return !this.class1.some(_ => _.state); 

     } 

    } 

Answer 1

私はこのコードを実行されませんでしたが、アイデアは、1つのparamにあなたのチェックボックスの状態を統一することです。次のコードでは、ボタンの状態を保存するためにbuttonStateプロパティを作成しました。また、setButtonState()メソッドを呼び出すイベントリスナーとして(ngModelChange)を使用します。class1/class6配列の "state" paramが表示されませんでした。

リンク：

ngModelChange：使用のhttps://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngModel

例：Angular 2 ngModelChange select option, grab a specific property

@Component({ 
    selector: 'my-app', 
    template: ` 
<label *ngFor="let cb of classes"> 
<input type="checkbox" [(ngModel)]="cb.state" (ngModelChange)="setButtonState()"/>{{cb.label}} 
</label> 
<p><button [disabled]="buttonState">button</button></p>` 
}) 

export class AppComponent { 

    private buttonState: boolean = true; 

    private classes = [{label: 'English(class1-5)', state: false},{label: 'Maths(class1-5)', state: false}, 
    {label: 'English(class6-8)', state: false},{label: 'Maths(class6-8)', state: false} 
    ]; 

    setButtonState() { 

    let counter = 0; 
    for(let i=0;i<this.classes.length;i++) { 


      if (this.classes[i].state === true) { 
      counter++; 
      } 

     } 

     if (counter >= 2) { 
      this.buttonState = false; 
     } else { 
      this.buttonState = true; 
     } 
    } 
}