I'm facing a situation where I need to add/remove form groups with multiple form controls.
Let's consider this scenario:
https://i.sstatic.net/N2HhL.png
The first dropdown represents the country list, the second dropdown displays states based on the selected country, and the last input control is for comments.
The issue arises when the page loads - the country dropdown fetches data from the country API by default, but the states are not loading correctly based on the selected country. Changing the country option results in all other countries' state dropdowns changing likewise.
Here's my attempt: HTML
<form [formGroup]='formName'>
<div formArrayName="controllerArray" class="ui-g ui-g-12 ui-g-nopad " >
<div class="ui-g ui-g-12 ui-g-nopad " *ngFor="let item of formName.controls.controllerArray.controls; let i=index" [formGroupName]="i">
<div class="ui-md-4">
<label class="mandatory"
>{{ labels["STATE_OF_INCORPORATION_FILE_NUMBER"] }}
<span class="colon"></span>
</label>
<select formControlName="select1" class="ui-inputtext" [(ngModel)]="item.controls.select1.value" (change)="changeAction($event,i)">
<option>--Select--</option>
<option *ngFor="let c of countryOptions" [value]="c.value">{{c.label}}</option>
</select>
</div>
<div class="ui-md-4">
<label class="lbl-hidden"> State </label>
<select formControlName="select2" class="ui-inputtext" [(ngModel)]="item.controls.select2.value">
<option>--Select--</option>
<option *ngFor="let b of businessStateOptions" [value]="b.value">{{b.label}}</option>
</select>
</div>
<div class="ui-md-3">
<label class="lbl-hidden"> comments </label>
<input
type="text"
pInputText
class="form-control"
formControlName="input"
/>
</div>
<div class="ui-md-1">
<label class="lbl-hidden"> State </label>
<br/>
<button (click)='removeInput(i)' style="min-width: auto;" pButton icon="fa fa-minus"></button>
</div>
</div>
</div>
</form>
<button class="add-remove-btn" pButton (click)='addInput()' icon="fa fa-plus"></button>`
Angular8 TS
import { Component, OnInit, ViewChild } from '@angular/core'
import { FormBuilder, Validators, FormArray } from '@angular/forms';
export class EntityEditComponent implements OnInit {
public countryOptions = [];
formName =this.fb.group({
controllerArray: this.fb.array([])
})
ngOnInit() {
this.countryOptions = [{"label":"United States","value":"US"},{"label":"Canada","value":"CA"}]
}
changeAction(e, index) {
if(index == 1 ) { // Here I'm trying to change the data if country is selected CA
let businessStateOptions = []
businessStateOptions= [{label:"Alberta",value:"CA"}]
const controlArray = <FormArray> this.formName.get('controllerArray');
controlArray.controls[index].get('select2').setValue( businessStateOptions);
}
}
addInput() {(this.formName.get('controllerArray') as FormArray).push(this.fb.group({select1:'', select2:'',input:''})) }
removeInput(index) { this.formName.controls.controllerArray["controls"].splice(index,1) }
}
Expected results are,
When I change the country, only the selected country's respective states should load in the dropdown without affecting any other dropdowns.