Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

nz-checkbox-group not working with Reactive Forms #8965

Closed
monsieur-ricky opened this issue Jan 9, 2025 · 3 comments
Closed

nz-checkbox-group not working with Reactive Forms #8965

monsieur-ricky opened this issue Jan 9, 2025 · 3 comments
Assignees

Comments

@monsieur-ricky
Copy link

monsieur-ricky commented Jan 9, 2025

Reproduction link

https://stackblitz.com/edit/dx6v718q?file=src%2Fapp%2Fapp.component.ts

Steps to reproduce

  1. Create or open an app with "nz-checkbox-group" using Reactive Forms
  2. Update to Angular 19.0.6 and Ng Zorro 19.0.1
  3. Check if the "nz-checkbox-group" in the Reactive Form doesn't show any data

What is expected?

The "nz-checkbox-group" to work correctly with reactive Forms using "formControlName".

What is actually happening?

After updating to the latest version of Angular (19.0.6) and NG Zorro (19.0.1), all of the nz-checkbox-group controls that were being used in a Reactive Form with formControlName stopped working (i.e., don't show any data).

<form nz-form [formGroup]="demoForm">
    <h1>Options:</h1>
    <nz-checkbox-group formControlName="options" />
  </form>
@Component({})
export class NzDemoCheckboxLayoutComponent {
  demoForm = new FormGroup({
    options: new FormControl([
      { label: 'Apple', value: 'Apple' },
      { label: 'Pear', value: 'Pear' },
      { label: 'Orange', value: 'Orange' },
    ]),
  });
}
Environment Info
ng-zorro-antd 19.0.1
Browser Chrome 131.0.6778.205
@Laffery
Copy link
Collaborator

Laffery commented Jan 10, 2025

hi @monsieur-ricky , please refer to the show case

  1. should set [options] first
  2. the value of the formControl should be NzCheckboxOption['value'][], such as ['Apple']

@Laffery Laffery added Usage Usage questions (not reommended to open a issue for this) and removed Usage Usage questions (not reommended to open a issue for this) labels Jan 10, 2025
@NG-ZORRO NG-ZORRO deleted a comment from zorro-bot bot Jan 10, 2025
@monsieur-ricky
Copy link
Author

hi @monsieur-ricky , please refer to the show case

  1. should set [options] first
  2. the value of the formControl should be NzCheckboxOption['value'][], such as ['Apple']

Thanks for the feedback @Laffery

I've managed to make it work following your suggestion:

<nz-checkbox-group
    formControlName="selectedOptions"
    [nzOptions]="listOfOptions"
  />

Since this was a breaking change, it would be useful to update the docs with examples using Reactive Forms.

@HyperLife1119
Copy link
Collaborator

Hi, I think this is already noted in the changelog and the documentation has been updated, although the docs use ngModel as an example, it's pretty much the same with ReactiveForms.
I'll close this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants