コンテンツが入力された初期データに基づいてグループからダイナミックを作成し、グループから追加/削除しようとしています。残念ながら、それは機能していません。
期待される動作は、
- 国ドロップダウンにはデータがロードされ、選択された値で強調表示されますが、これはすでに正常に機能しています。
- 選択された国の州のドロップダウン データは、初期データから選択された値でデフォルトでロードされ、
stateCode現在機能していない国も変更されます。 - 追加ボタンをクリックすると、デフォルトで「米国」の国とそれぞれの州のデータが読み込まれます。州のドロップダウンは、デフォルトで「--select--」で選択する必要があります。
注: すべてのデータは API から取得されます。テストの目的 国と州の静的オブジェクトを追加しました。
ここで私の試み
https://stackblitz.com/edit/angular-8-app-example-fkjzfe-wekubn?file=src%2Fapp%2Fapp.component.ts
現在の動作デモ
https://angular-8-app-example-fkjzfe.stackblitz.io/
HTML
<form [formGroup]='entityForm'>
<div formArrayName="optionGroups" class="ui-g ui-g-12 ui-g-nopad " >
<div style="width: 100%;
display: flex; margin-bottom:10px" class="ui-g ui-g-12 ui-g-nopad " *ngFor="let item of entityForm.controls['optionGroups'].controls; let $index=index" [formGroup]="item">
<div class="ui-md-4">
<label class="mandatory"
>Country
<span class="colon"></span>
</label>
<select formControlName="country" class="ui-inputtext" (change)="onCountryChange(entityForm.controls['optionGroups'].controls[$index].controls['country'].value, $index)" >
<option>--Select--</option>
<option *ngFor="let c of countries" [ngValue]="c.countryCode">{{c.country}}</option>
</select>
</div>
<div class="ui-md-4">
<label class="lbl-hidden"> State </label>
<select formControlName="state" class="ui-inputtext">
<option>--Select--</option>
<option *ngFor="let state of states[entityForm.controls['optionGroups'].controls[$index].controls['country'].value]" value="state.code">{{state.state}}</option>
</select>
</div>
<div class="ui-md-3">
<label class="lbl-hidden"> Number </label>
<input
type="text"
pInputText
class="form-control"
formControlName="place"
/>
</div>
<div class="ui-md-1">
<button (click)='removeOptionGroup(i)' style="min-width: auto;" pButton icon="fa fa-minus">Remove</button>
</div>
</div>
</div>
</form>
<button class="add-remove-btn" pButton (click)='addOptionGroup()' icon="fa fa-plus">Add</button>`
TS
import { Component, OnInit, ViewChild } from '@angular/core'
import { FormBuilder, Validators, FormArray, FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
public countryOptions:any = [];
public stateOptions:any = [];
public countries = [];
public states = [];
public entityForm: FormGroup;
constructor(private fb: FormBuilder) {
this.entityForm = this.fb.group({
optionGroups : this.fb.array([]),
});
this.countries = this.countryOptions
this.states=[];
}
public addOptionGroup(){
const fa = this.entityForm.controls["optionGroups"] as FormArray;
//fa.setValue("--Select--");
fa.push(this.newOptionGroup());
}
public removeOptionGroup(index: number){
const fa = this.entityForm.controls["optionGroups"] as FormArray;
fa.removeAt(index);
}
onCountryChange(selectedCountry: string , formIndex : number) : void {
this.states[selectedCountry] = this.getStates(selectedCountry)
}
private newOptionGroup() {
return new FormGroup({
country: new FormControl("--select--"),
state: new FormControl("--select--"),
place: new FormControl("GGG"),
});
}
getStates(selectedCountry) {
//API call
switch(selectedCountry) {
case "US" :
this.stateOptions =[
{id: 14, state: "Alabama", code: "AL", countryCode: "US"},
{id: 15, state: "Alaska", code: "AK", countryCode: "US"},
{id: 17, state: "Arizona", code: "AZ", countryCode: "US"},
{id: 18, state: "Arkansas", code: "AR", countryCode: "US"},
{id: 19, state: "California", code: "CA", countryCode: "US"}
]
break;
case "CA" :
this.stateOptions =[{id: 37, state: "Marshall Islands", code: "MH", countryCode: "CA"},
{id: 4, state: "New Brunswick", code: "NB", countryCode: "CA"},
{id: 5, state: "Newfoundland and Labrador", code: "NL", countryCode: "CA"},
{id: 53, state: "Northern Mariana Islands", code: "MP", countryCode: "CA"},
{id: 6, state: "Northwest Territories", code: "NT", countryCode: "CA"}]
break;
default:
this.stateOptions =[
{id: 14, state: "Alabama", code: "AL", countryCode: "US"},
{id: 15, state: "Alaska", code: "AK", countryCode: "US"},
{id: 17, state: "Arizona", code: "AZ", countryCode: "US"},
{id: 18, state: "Arkansas", code: "AR", countryCode: "US"},
{id: 19, state: "California", code: "CA", countryCode: "US"}
]
break;
}
return this.stateOptions;
}
initFormArray(initForm:any) {
const formArray = this.entityForm.get('optionGroups') as FormArray;
initForm.map((item, index) => {
formArray.push(this.createForms(item, index));
});
this.entityForm.setControl('optionGroups', formArray);
}
createForms(adresse, index): FormGroup {
let formGroup: FormGroup = new FormGroup(
{
country: new FormControl(adresse.countryCode),
state: new FormControl(adresse.stateCode),
place: new FormControl(adresse.fileNumber)
}
);
this.onCountryChange(adresse.select1, index)
return formGroup;
}
getAllCountries() {
//API call
this.countries = [{"country":"United States","countryCode":"US"},{"country":"Canada","countryCode":"CA"}]
}
ngOnInit() {
this.getAllCountries()
const initData = [
{countryCode: "US", stateCode: "AZ", fileNumber: "AAA"},
{countryCode: "CA", stateCode: null, fileNumber: null}
]
this.initFormArray(initData)
}
}