Dynamic mat-select option in form-array

Question

I have a dynamic form group.

Both mat-select are dynamic. When I press the add button, it adds another array of the form with same elements and same dynamic fields.

In the first index of the array of the form group, when I change the value of the mat-select in the CATEGORY column, it will populate the JOB column according to values fetch from the database.

My issue is when I add another array of form group, the mat-select are still dynamic but when I change the value of the mat-select in the 2nd row, column CATEGORY, it changes every all the rows in JOBS column base on the fetch data in the first column.

HTML file

<mat-form-field>
  <mat-select formControlName="categories" 
          (selectionChange)="getJobs($event.value)">
              <mat-option *ngFor="let cat of categories" 
                 [value]="cat.jobCatID">
                {{cat.name}}
              </mat-option>
  </mat-select>
</mat-form-field>
<mat-form-field>
   <mat-select formControlName="jobs">
          <mat-option *ngFor="let job of jobs" [value]="job.jobID">
            {{ job.name}}
          </mat-option>
   </mat-select>
 </mat-form-field>

TS file

getJobs(id){
return this.category.getJob(id).subscribe(
  data => {
      if(data.success){
        this.jobs=data.jobsCat.jobs
      }
  }
)}

is their anyway I can make the jobs variable dynamic, in order to have different objects variable with the same values in the ngFor for each JOBS mat-select?

Share the code how you are forming the FormGroup and FormControl multiple records. — Sunil Singh
ngOnInit() { const id = +this.route.snapshot.paramMap.get('id'); this.form = this._fb.group({ name:this.applicantName, jobList:this._fb.array([this.getJobModel()]) }); this.getApplicant(id); this.getCategories(); }; addField(){ const control = <FormArray>this.form.controls['jobList']; control.push(this.getJobModel()); } getItemsModel(){ return this._fb.group({ categories:[''], jobs:[''] }); } — mydearfriend
Update this code into the question and more html code for jobList iteration. — Sunil Singh
Just the remaining formarray codes are lacking in my html. Is their anyway to make jobs variable in *ngFor to be dynamic or I want to concatenate the index in the variable name? — mydearfriend

mydearfriend mydearfriend · Accepted Answer · 2018-11-18T03:33:20

All good now. I just made jobs into array.

jobs:any[]=[];

declared it like this. Then fetch used the index as parameter for a dynamic array.

Dynamic mat-select option in form-array

1 Answers