angular 6の条件に基づいてチェックボックスを無効にする方法は？

Question

私のhtmlコード、

<div>
  <div>
   <input type="checkbox" id="Checkbox0" name="cCheckbox0" class="custom-control-input" (change)="checkSelected(checkBox[0].label)">
   <label class="label" for="Checkbox0" >first</label>
  </div>
  <div>
  <input type="checkbox" id="Checkbox1" name="cCheckbox1" class="custom-control-input" (change)="checkSelected(checkBox[1].label)">
   <label class="label" for="Checkbox1" >first</label>
  </div>
  <div>
  <input type="checkbox" id="Checkbox2" name="cCheckbox2" class="custom-control-input" (change)="checkSelected(checkBox[2].label)">
   <label class="label" for="Checkbox2" >first</label>
  </div>
</div>


 <div>
  <div>
   <input type="checkbox" id="Checkbox3" name="cCheckbox3" class="custom-control-input" (change)="checkSelected(checkBox[3].label)">
   <label class="label" for="Checkbox3" >first</label>
  </div>
  <div>
  <input type="checkbox" id="Checkbox4" name="cCheckbox4" class="custom-control-input" (change)="checkSelected(checkBox[4].label)">
   <label class="label" for="Checkbox4" >first</label>
  </div>
  <div>
  <input type="checkbox" id="Checkbox5" name="cCheckbox5" class="custom-control-input" (change)="checkSelected(checkBox[5].label)">
   <label class="label" for="Checkbox5" >first</label>
  </div>
</div>

同様に、チェックボックスを含む同じhtmlファイルにさらに2つのdivがあります。私がする必要があるのは、最初のdivの最初のチェックボックスのonclickです。最初のdiv、2番目のdiv、3番目のチェックボックスの他のすべてのチェックボックスを無効にする必要があります。

angularを初めて使用するので、ここで無効にする方法がわかりません。ng-disabledを使用しようとしましたが、機能していないようです。誰かが私にこれを手伝ってくれませんか？

Answer 1

リアクティブフォームを使用している場合は、このようなコンポーネントのチェックボックスを無効にすることもできます

import { FormBuilder, FormGroup } from '@angular/forms';

constructor(private _fb: FormBuilder) { }

myForm: FormGroup;

ngOnInit(): void {
 this.myForm = this._fb.group({
   myCheckBoxInput: [{value: 1, disabled: true}],
 });
}