Checkbox selections from an Array

Question

I'm trying to make a reactive form that displays a checkbox list where each item in the list is an item from an array. I am trying to make it so I can select as many items from the array using this checkbox list.

I have tried using FormArrays, reading multiple articles and StackOverflow answers on the topic but could not figure it out and have gotten very confused as different sources offered different solutiuons.

Here is my component.ts file:

export class ItemSelectorComponent implements OnInit {

  public list: Array<ItemData>;
  public collectionForm: FormGroup;

  constructor(
    private db: DatabaseService,
    private fb: FormBuilder
  ) { }

  async ngOnInit(): Promise<void> {
    await this.getList();

    this.collectionForm = this.fb.group({
      name: [null],
      items: [null] //I have tried here new FormArray([]) and this.fb.array(...) but to no avail
    });
  }

  async getList() { //Sets the value of the list to response from the backend.
    var res = await this.db.getList();
    if (res.status == 200) {
      this.list = res.body;
    } else {
      console.log(`List Status Code ${res.status}.`);
      this.list = [];
    }
  }

  //Form Functions

  submit() {
    console.log(this.collectionForm.value);
  }

}

and my component.html

<form [formGroup]="collectionForm" (ngSubmit)="submit()">
  <mat-form-field appearance="fill" required>
    <mat-label>Collection Name</mat-label>
    <input matInput formControlName="name">
  </mat-form-field>

  <br>

  <!-- Implement here some sort of ngFor that loops over list and has checkbox inputs -->

  <br>
  <button mat-raised-button color='primary'>Submit</button>
</form>

Eldar · Accepted Answer · 2021-04-06 08:59:20Z

3

Well, you need to do a few things.

Initialize form group before server side call with empty FormArray
In your async getList() method dynamically push new items to your form array.
Render form array items dynamically

After you get the list from server push new items :

const items = this.form.get("items") as FormArray;
    this.list.forEach(r => {
      items.push(
        this.fb.group({
          id: r.id,
          checked: r.checked
        })
      );
    });

Then in your form render form array items dynamically :

 <div *ngFor="let item of form.get('items').controls;let i = index" [formGroup]="item">

    <div>
      Check <input type="checkbox" formControlName="checked">
    </div>

  </div>

Stackblitz

edited Apr 6, 2021 at 8:59

answered Apr 6, 2021 at 8:53

Eldar

10.9k2 gold badges20 silver badges40 bronze badges

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

2 Comments

nlanson Over a year ago

Thank you for taking the time to answer this. I will test this and let you know in the morning.

nlanson Over a year ago

Sir, you are a legend.

Collectives™ on Stack Overflow

Checkbox selections from an Array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related