时间戳

首页 > 解决方案 > 以反应形式使用 disabled

angular - 以反应形式使用 disabled

问题描述

这是我的表格：

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

标签： angularangular-reactive-forms

解决方案

您将不得不通过代码禁用该字段，而不是在 html 中。这可以在监听原因字段的 valueChanges 时通过以下方式完成：

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

推荐阅读