Angular: Multiple Select Using FormGroup and FormArray

Question

How could I create a multiple select type element which would push an object to a formarray on being clicked?

I want the final JSON object to look like this:

{
    business_id: [ {
                      name: "one"

                    },]
}

Here is my .ts file

 businesses = [
    {name: "one", id: 0},
    {name: "two", id: 1}
  ]

 ngOnInit(): void {
    this.leadGenerateForm = new FormGroup({
      'business_id': new FormArray([])
    })
  }

onClickBusiness(){
    const group = new FormGroup({
      'name': new FormControl(null)
    });
    (<FormArray>this.leadGenerateForm.get('business_id')).push(group);
  };

Here is the HTML template

 <form formGroupName="leadGenerateForm">
        <div formArrayName="business_id">
            <select multiple (click)="onClickBusiness()">
                <div *ngFor="let businessControl of leadGenerateForm.get('business_id')['controls']; let i=index">
                    <options [formControlName]="i">{{businessControl.name}}</options>
                </div>
            </select>
        </div>
    </form>

So you need to add an option to the select when you click on one of its elements? — lpizzinidev
– lpizzinidev, Commented Nov 24, 2020 at 16:59
I basically was trying to use mat-select, however, it turns out it doesn't work with objects. I want something like what it provides, the user can click on as many options and the objects (key, value) pair get added to the array. — Pratyush
– Pratyush, Commented Nov 24, 2020 at 17:08

Selaka Nanayakkara · Accepted Answer · 2020-11-24 20:20:40Z

1

I assume you need to add multiple select options in controller upon the select controllers value has been selected.

I have added a simple solution and its working demo here.

In HTML :

<form [formGroup]="form" (ngSubmit)="submit()">
    <p>Select a value </p>
    <div formArrayName="items" *ngFor="let item of form.controls['items'].controls; let i = index">
        <div [formGroupName]="i">
            <select  formControlName='name' >
                    <option *ngFor="let opt of businesses; let i =index" [value]="opt.name">{{opt.name}}</option>         
            </select>
        </div>
    </div>
</form>

Component.ts :

import { Component, OnInit } from "@angular/core";
import { FormGroup, FormArray, FormBuilder } from "@angular/forms";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  name = "Angular 6";
  form: FormGroup;
  businesses = [{ name: "one", id: 0 }, { name: "two", id: 1 }];
  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      items: this.fb.array([this.createItem()])
    });
    this.onChanges();
  }

  createItem() {
    return this.fb.group({
      name: ["Jon"]
    });
  }

  onChanges(): void {
    this.form.get("items").valueChanges.subscribe(value => {
      this.businesses.push({
        name: value[0].name,
        id: Math.floor(Math.random() * 100 + 1)
      });
    });
  }
}

edited Nov 24, 2020 at 20:20

answered Nov 24, 2020 at 17:34

Selaka Nanayakkara

6,9963 gold badges27 silver badges60 bronze badges

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

3 Comments

Pratyush Over a year ago

I actually don't want new dropdowns to be added to the DOM, I just the user to be able to click more than one option.

Selaka Nanayakkara Over a year ago

So you can chnage the select controllers change functionality to push a new element to businesses array right? Is that what you want?

Pratyush Over a year ago

Yup, sounds like it.

Collectives™ on Stack Overflow

Angular: Multiple Select Using FormGroup and FormArray

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