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

角-反应形式-禁用下拉菜单

1 个答案: