重置反应形式会删除禁用的字段

Question

如何防止在重置时删除禁用的字段。 这是我的代码的一部分：

this.updateInformationForm = this.fb.group({
  'first_name': [first_name, Validators.required],
  'last_name': [last_name, Validators.required],
  'address1': [address1, Validators.required],
  'address2': [address2, Validators.required],
  'city': [city, Validators.required],
  'state': [state, Validators.required],
  'zip': [zip, Validators.required],
  'phone': [phone, Validators.required],
  'dob': [dob, Validators.required],
  'gender': [gender, Validators.required],
  'email': [email, Validators.required],
});

this.updateInformationForm.controls['first_name'].disable();
this.updateInformationForm.controls['last_name'].disable();
this.updateInformationForm.controls['email'].disable();

还有我的重置方法：

  clear(): void {
    this.updateInformationForm.reset();
  }

Answer 1

改为在构建表单时添加禁用。假设这里你不想在重置时设置任何默认值，而只是清空所有字段，但是如果你在构建表单时最初将某个字段设置为禁用，重置后它将保持禁用状态：

constructor(private fb: FormBuilder) {
  this.updateInformationForm = this.fb.group({
    // set as disabled already here!
    first_name: [{ value: 'first name', disabled: true }],
    last_name: ['last name']
  });
}

DEMO