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

Question

我创建了一个表格。

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] 填充。

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

标签： angularangular-reactive-forms

Answer 1

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

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