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

Answer 2

重新初始化整个表单

所以创建一个initForm函数

initForm() {
  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();
    this.initform();
  }

<小时/> 或者，您可以尝试在html中使用[disabled]属性，而不是

是否基于start

等可变条件

[disabled]="!start"

或者它是否基于另一种形式条件

[disabled]="!updateInformationForm.get('email').valid"

重置活动表单会删除禁用的字段

2 个答案: