初始化表单后，Angular Reactive表单设置具有禁用属性的值答案

【问题标题】：Angular Reactive forms set values with disabled attribute after form is initialized初始化表单后，Angular Reactive表单设置具有禁用属性的值
【发布时间】：2020-03-25 21:23:46
【问题描述】：

我创建了一个表单。

HTML 代码：

<form [formGroup]="form">
  <input formControlName="name"/>
  <input formControlName="description"/>
  <input formControlName="category"/>
  <input formControlName="type"/>
</form>

下面是初始化表单的代码，设置初始值为空：

form: FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
  this.initForm();
}

private initForm() {
  this.form = this.fb.group({
      name: ['', Validators.required],
      description: [''],
      category: ['', Validators.required],
      type: ['',  Validators.required],
  });
}

在某些情况下，表单需要填写从 API 接收的数据。一旦收到数据，下面的代码就会执行：

// data received from API
if(data){
 this.form = this.fb.group({
  name: [{value: data.name, disabled: true}],
  description: [{value: data.description, disabled: true}],
  category: [{value: data.category, disabled: true}],
  type: [{value: data.type, disabled: true}]
 });
}

在上述情况下，值会正确更新，但控件不会被禁用。

我也试过setValue：

this.form.setValue({
  name: {value: data.name, disabled: true},
  description: {value: data.description, disabled: true},
  category: {value: data.category, disabled: true},
  type: {value: data.type, disabled: true}
});

在上述情况下，值用 [object Object] 填充。

如何同时设置字段值和禁用属性？

【问题讨论】：

要设置值并立即禁用，您可以尝试name: [{value: data.name, disabled: true}, Validators.required],
您的代码有效，请参阅 stackblitz stackblitz.com/edit/…，您只需要注意“表单”没有值，在 .html 中使用 <form *ngIf="form"...> 以避免初始错误
@Eliseo，谢谢，添加 ngIf="form"，解决了我的问题。

标签： angular angular-reactive-forms

【解决方案1】：

您为什么不直接setValue 并禁用整个表单？

this.form.setValue(data);
this.form.disable();

【讨论】：

谢谢，我也想过这样做。我想知道我们是否可以立即实现这一点（设置值并禁用控件）。