如何在 Angular 14 反应式表单中一次启用所有表单控件

Question

我有一个包含 35 个字段的反应式表单。 当页面加载时，应禁用所有 35 个控件。 但是在点击“编辑”按钮时，所有这 35 个控件都应该被启用。 这是我试过的：

HTML

<form ...>
    Email input field...
    Contact input field...
    33 other fields...
</form>

<button (click)="allowFormUpdate()">Edit</button>

TS

formUpdateStatus: boolean = true; // VARIABLE TO INITIALLY DISABLE THE FIELDS
myReactiveForm;

allowFormUpdate() {
    this.formUpdateStatus = false; // NOT WORKING
    this.myReactiveForm.controls['email'].enable();
    this.myReactiveForm.controls['contact'].enable();
    this.myReactiveForm.controls['firstName'].enable();
    ...
    // Code being repeated
}

ngOnInit(): void {
    ...
    this.myReactiveForm= new FormGroup({
      email: new FormControl({value: '...', disabled: this.formUpdateStatus}),
      contact: new FormControl({value: '...', disabled: this.formUpdateStatus}),
      firstname: new FormControl({value: '...', disabled: this.formUpdateStatus}),
      ...     

当我单击“编辑”按钮时，调用了我的方法allowFormUpdate()但请注意，在该方法中我必须一个接一个地启用每个控件，因为this.formUpdateStatus = false; 没用。 请帮助我一次启用所有字段。

Answer 1

您可以通过以下方式启用FormGroup中的所有表单控件：

this.myReactiveForm.enable();

同样，您可以通过禁用FormGroup来禁用所有表单控件，而不必使用disabled值禁用每个FormControl 。

this.formUpdateStatus && this.myReactiveForm.disable();

演示 @ StackBlitz