角度 - 反应形式 - 禁用下拉

Question

我有一个 Angular 反应形式的下拉菜单。 我想在选择时禁用它。但是当我使用 [disabled]='' 属性时直接得到这个错误。

打字稿

// Angular Reactive form validation
this.createform = this.formBuilder.group({ENT_TYP_PSD: ''});

HTML

<div class="form-group row">
  <label class="col-md-3" for="ENT_TYP_PSD">Type of Natural or Legal Person </label>
  <p-dropdown class="col-md-4" name="ENT_TYP_PSD" [options]="parentEntities" optionLabel="EntityTypeName"
    placeholder="Please select" (onChange)="entityTypeChanged($event)" formControlName="ENT_TYP_PSD" [disabled]='disableEntityType'>
  </p-dropdown>
</div>

错误信息：-

您似乎正在使用带有反应形式的 disabled 属性 指示。如果在设置此控件时将 disabled 设置为 true 在您的组件类中，实际上将设置 disabled 属性 在 DOM 中为您服务。我们建议使用这种方法来避免 “检查后更改”错误。

  Example:    form = new FormGroup({  first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
last: new FormControl('Drew', Validators.required)   });

当我在打字稿中使用它时，我根本无法在 this.createform.value 中获取该字段 ENT_TYP_PSD 值。

this.createform.controls['ENT_TYP_PSD'].disable(true)

Answer 1

该错误意味着您不应使用disabled 属性。相反，您应该以编程方式设置输入的禁用状态，以便 Angualr 可以跟踪它。

尝试删除属性并使用 getter/setter/variable 组合：

_disableEntityType: boolean
get disableEntityType() { return !!this._disableEntityType; }
set disableEntityType(value: boolean) {
  this._disableEntityType = value;
  this.createForm.get('ENT_TYP_PSD')[value ? 'disable' : 'enable']();
}

对于创作：

this.createform = this.formBuilder.group({ENT_TYP_PSD: {
  value: '',
  disabled: this.disableEntityType
}});