Angular checkbox changing itself issue

Question

I'm a beginner in Angular. I want to sort a dropdown FormArray alphabetically.

component.html

<label class="custom-control custom-checkbox" *ngFor="let car of carsControls; let i = index" [hidden]="!cars[i]?.show">
  <input type="checkbox" class="custom-control-input" [formControl]="car" />
  <span class="custom-control-label" [innerHTML]="cars[i]?.name"></span>
</label>

component.ts

ngOnInit(){
  this.cars.sort((a, b) => a.name.localeCompare(b.name));
}

My issue is that after submitting a selected checkbox, the selection of the dropdown changes itself. For example: The selected checkbox changes from Mercedes to BMW by itself after I press submit.

EDIT:

I am getting the Controls like this:

get carsControls() {
    return (this.carFormGroup?.get('cars') as 
    FormArray)?.controls;
  }

FormGroup:

carFormGroup = this.formBuilder.group({
    filter: [''],
    cars: this.formBuilder.array([])

Florent Arlandis · Accepted Answer · 2020-07-22 09:21:08Z

3

Cars are ordered alphabetically but not carsControl. That's your problem, you only have the labels ordered.

answered Jul 22, 2020 at 9:21

Florent Arlandis

9352 gold badges13 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

pokly Over a year ago

Thank you very much for your help! Do you know how I can do it? I just couldn't figure it out yet...

Florent Arlandis Over a year ago

Just order carsControls. Show me how you built your form.

pokly Over a year ago

Thank you, please have a look at my edit. sort() wouldn't work on AbstractControl

Collectives™ on Stack Overflow

Angular checkbox changing itself issue

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related