以反應形式使用 disabled

Question

這是我的表格：

damageInfoForm = new FormGroup({
cause : new FormControl('', Validators.required),
subCause : new FormControl('', Validators.required)
 })

字段 subCause 與字段原因相關，這就是為什么如果字段原因為空，我要禁用字段 subCause

所以我像這樣編輯我的 html：

  <form class="k-form k-form-inline " [formGroup]="damageInfoForm">
                  
                        <div class="col-md-4 no-padding-left">
                          <div [ngClass]="{ 'spaced':true }">
                            <span>cause</span>
          
                            <kendo-combobox  [data]="causes" [disabled]="generalDataForm.get('mainCause').value==''" formControlName="cause" class="form-control">
                            </kendo-combobox>
                            <span>Sub cause</span></span>
                            <kendo-combobox  [data]="subCauses" [disabled]="damageInfoForm.get('cause').value==''" formControlName="subCause" class="form-control">
                            </kendo-combobox>
  </div>
 </div>
</form>

它有效，但它給了我警告It looks like you're using the disabled attribute with a reactive form directive

Answer 1

您必須通過代碼禁用該字段，而不是在 html 中。 這可以在監聽原因字段的 valueChanges 時通過以下方式完成：

damageInfoForm.get('cause').valueChanges.subscribe(v => {
   if(!v) {
     damageInfoForm.get('subCause').disable();
   }
   else {
     damageInfoForm.get('subCause').enable();
   }});