I am facing an issue with a reactive form containing 35 fields. Initially, all controls need to be disabled when the page loads. However, upon clicking the 'Edit' button, I want all 35 controls to become enabled. Here is my attempted solution:
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}),
...
Upon clicking the 'Edit' button, although allowFormUpdate() method was triggered, I had to enable each control individually as setting this.formUpdateStatus = false; did not work. Is there a way to enable all fields at once? Please assist me with this.