formGroup.get('name').disable() strange phenomenon about angular HOT 2 OPEN

The issue you're facing is due to the fact that you're reassigning a new form group to this.form every time ngOnChanges is triggered, which causes the checkbox to be disabled even when this.item.name is not equal to 111.

To fix this, you should only create the form group if it hasn't been created yet. Additionally, you should update the form controls based on the changes in the input data. Here's an updated version of your code:

@component({
selector: "form-test",
template: <form [formGroup]="form"> <input type="checkbox" formControlName="checkbox" />{{ item.name }} <p>form checkbox disabled: {{ form.get("checkbox").disabled }}</p> </form>,
})
export class FormTestComponent implements OnChanges {
@input() item: any;

form: FormGroup;

constructor(private fb: FormBuilder) {
// Initialize the form once in the constructor
this.form = this.fb.group({
name: [""],
checkbox: [false],
});
}

ngOnChanges(changes: SimpleChanges): void {
// Check if the form has been initialized
if (this.form) {
// Update the form controls based on the input changes
this.form.patchValue({
name: this.item.name,
checkbox: this.item.name === 111 ? true : false,
});

  // Disable the checkbox if this.item.name is 111
  if (this.item.name === 111) {
    this.form.get("checkbox")?.disable();
  } else {
    this.form.get("checkbox")?.enable();
  }
}

}
}

from angular.

The issue you're facing is due to the fact that you're reassigning a new form group to this.form every time ngOnChanges is triggered, which causes the checkbox to be disabled even when this.item.name is not equal to 111.

To fix this, you should only create the form group if it hasn't been created yet. Additionally, you should update the form controls based on the changes in the input data. Here's an updated version of your code:

@component({ selector: "form-test", template: <form [formGroup]="form"> <input type="checkbox" formControlName="checkbox" />{{ item.name }} <p>form checkbox disabled: {{ form.get("checkbox").disabled }}</p> </form>, }) export class FormTestComponent implements OnChanges { @input() item: any;

form: FormGroup;

constructor(private fb: FormBuilder) { // Initialize the form once in the constructor this.form = this.fb.group({ name: [""], checkbox: [false], }); }

ngOnChanges(changes: SimpleChanges): void { // Check if the form has been initialized if (this.form) { // Update the form controls based on the input changes this.form.patchValue({ name: this.item.name, checkbox: this.item.name === 111 ? true : false, });

  // Disable the checkbox if this.item.name is 111
  if (this.item.name === 111) {
    this.form.get("checkbox")?.disable();
  } else {
    this.form.get("checkbox")?.enable();
  }
}

} }

Thank you for your answer. But I don't think it's a good solution, it's more like avoidance. I'm using the exact same code in Angular 15 and Angular 17 is just right, it's more in line with the developer's thinking.

Here's the demo using v17

from angular.