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

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

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

Reset of reactive form removes disabled fields

validation

angular

angular-reactive-forms