formGroup.get('name').disable() strange phenomenon

[Vibing]

Which @angular/* package(s) are the source of the bug?

forms, zone.js

Is this a regression?

Yes

Description

Partial 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) {
    this.form = this.fb.group({});
  }

  ngOnChanges(changes: SimpleChanges): void {
    this.form = this.fb.group({
      name: [""],
      checkbox: [false],
    });

    if (this.item.name === 111) {
      this.form.get("checkbox")?.disable();
    }
  }
}

I'll assign a new group to this.form each time ngOnChanges is triggered, and I'll make the disabled property of the checkbox true when this.item.name === 111, but when I click on the other list items, the disabled property of the checkbox will still look like it is true, it's actually false, but the checkbox in the template renders out with disabled=true

Please provide a link to a minimal reproduction of the bug

https://codesandbox.io/p/sandbox/angular-form-demo-skg9tp?file=%2Fsrc%2Fapp%2Fform.component.ts%3A19%2C35&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clpuz2b2y00073b6gj1fsj9nw%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clpuz2b2x00033b6gxglstab5%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clpuz2b2x00043b6gzmvymj2e%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clpuz2b2y00063b6g6zp3b7op%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clpuz2b2x00033b6gxglstab5%2522%253A%257B%2522id%2522%253A%2522clpuz2b2x00033b6gxglstab5%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clpvzkjyv00023b6gyqz3fk9b%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A19%252C%2522startColumn%2522%253A35%252C%2522endLineNumber%2522%253A19%252C%2522endColumn%2522%253A35%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252Fapp%252Fform.component.ts%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clpvzkjyv00023b6gyqz3fk9b%2522%257D%252C%2522clpuz2b2y00063b6g6zp3b7op%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clpuz2b2x00053b6g1v5mvtkn%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%2522%257D%255D%252C%2522id%2522%253A%2522clpuz2b2y00063b6g6zp3b7op%2522%252C%2522activeTabId%2522%253A%2522clpuz2b2x00053b6g1v5mvtkn%2522%257D%252C%2522clpuz2b2x00043b6gzmvymj2e%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clpuz2b2x00043b6gzmvymj2e%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 12.2.18
Node: 16.14.2 (Unsupported)
Package Manager: npm 8.5.0
OS: darwin arm64

Angular: 12.2.17
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.18
@angular-devkit/build-angular   12.2.18
@angular-devkit/core            12.2.18
@angular-devkit/schematics      12.2.18
@angular/cli                    12.2.18
@schematics/angular             12.2.18
rxjs                            6.6.7
typescript                      4.3.5

Anything else?

No response

[CSSinghNet]

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();
  }
}

}
}

[Vibing]

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

[JeanMeche]

I'll close this issue as it was with an unsupported version of Angular.
If you have an issue with the current major, feel free to open an new issue with a repro. Thank you for your understanding.

[Vibing]

I'll close this issue as it was with an unsupported version of Angular. If you have an issue with the current major, feel free to open an new issue with a repro. Thank you for your understanding.

Do you mean I have to use a higher version of Angular?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}