以反应形式禁用的使用

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