Angular2, nút disable nếu không có hộp kiểm chọn

Question

Tôi có nhiều hộp kiểm và một nút mà đã được kích hoạt chỉ khi ít nhất một hộp kiểm được chọn

<input type="checkbox">VALUE1 
<input type="checkbox">VALUE2 
<input type="checkbox">VALUE3 
<input type="checkbox">VALUE4 
<button>Proceed</button> 

Làm thế nào là đạt được bằng Angular2.

P.S: tìm thấy các câu hỏi tương tự nhưng không sử dụng Angular2.

Answer 1

Một cách là sử dụng ngModel trên mỗi hộp kiểm, rồi kiểm soát tài sản disabled của nút thông qua một phương pháp mà kiểm tra từng mô hình hộp kiểm bang:

@Component({ 
    template: ` 
    <label *ngFor="let cb of checkboxes"> 
     <input type="checkbox" [(ngModel)]="cb.state">{{cb.label}} 
    </label> 
    <p><button [disabled]="buttonState()">button</button> 
    ` 
}) 
class App { 
    checkboxes = [{label: 'one'},{label: 'two'}]; 
    constructor() {} 
    buttonState() { 
    return !this.checkboxes.some(_ => _.state); 
    } 
} 

Plunker

Answer 2

Sử dụng propertie [disable] như:

<input type="checkbox" [(ng-model)]="disableButton1"> VALUE1 
<input type="checkbox" [(ng-model)]="disableButton2"> VALUE1 
<input type="checkbox" [(ng-model)]="disableButton3"> VALUE1 
<input type="checkbox" [(ng-model)]="disableButton4"> VALUE1 
<button type="button" [disabled]="disableButton || disableButton2">Submit</button> 

Answer 3

Bạn c thực hiện bất kỳ hành động nào bằng cách sử dụng sự kiện $ trong sự kiện thay đổi của hộp kiểm.

mẫu:

HTML

<input type="checkbox" (change)="changeEvent($event)" /> 
<button [disabled]="toogleBool">button</button> 

TS

toggleBool: boolean=true; 

changeEvent(event) { 
     if (event.target.checked) { 
      this.toggleBool= false; 
     } 
     else { 
      this.toggleBool= true; 
     } 
    }