我在Anguarl FormArray中遇到带有ngSelect下拉列表的绑定列表的问题,我正在用FormArray构建一个包含州和城市下拉列表的FormGroup。
状态ddl将加载oninit(),然后在我更改状态时,城市ddl应该加载各自的数据,但不会影响其他城市ddl。
在选择受尊重的州之前,其他城市下拉列表将不会加载。
我最初可以加载状态,但无法在状态更改时绑定city ddl。这是我的代码。请看看。
import { Component, OnInit } from "@angular/core";
import {
FormBuilder,
FormGroup,
FormArray,
AbstractControl
} from "@angular/forms";
import { debounceTime } from "rxjs/operators";
@Component({
selector: "state-block",
templateUrl: "./state-block.component.html",
styleUrls: ["./state-block.component.scss"]
})
export class StateBlockComponent implements OnInit {
typeLoadName: string;
lFormGroup: FormGroup;
states = [1, 2, 3, 4];
stateControl: AbstractControl;
stateFormControls: FormGroup;
get lFormArray(): FormArray {
return this.lFormGroup.get("lFormArray") as FormArray;
}
statelist = ["state1", "state2", "state3", "state4"];
citylist = [];
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.initControls();
}
initControls() {
this.lFormGroup = this.fb.group({
lFormArray: this.fb.array([])
});
this.states.forEach(element => {
this.stateFormControls = this.createControls();
const myFormArray = <FormArray>this.lFormGroup.get("lFormArray");
this.stateFormControls.get("groupIndex").patchValue(myFormArray.length);
this.stateFormControls.valueChanges.subscribe(data =>
this.onValuesChanged(data)
);
this.lFormArray.push(this.stateFormControls);
this.lFormArray.valueChanges.subscribe(value =>
this.onFormArrayValueChanged(value)
);
const citylist = [
"zonePeril1",
"zonePeril2",
"zonePeril3",
"zonePeril4"
];
const selectedStateControl = this.stateFormControls.get("state");
selectedStateControl.valueChanges.subscribe(data => {
this.stateFormControls.get("city").value = zonePerilList;
});
});
}
onFormArrayValueChanged(value: any): void {
console.log("on form array value changed", value);
}
onValuesChanged(data: any): void {
console.log("on value changed", data);
}
createControls() {
return this.fb.group({
groupIndex: "",
state: "",
city: "",
});
}
}
<form [formGroup]="lFormGroup">
<div [formGroup]="lFormGroup">
<div formArrayName="lFormArray">
<div
[formGroupName]="i"
*ngFor="let item of lFormArray.controls; let i = index"
>
<div class="form-group row mb-2">
<label class="col-md-2 col-form-label" for="cityId">State</label>
<div class="col-md-3">
<ng-select
[items]="statelist"
bindLabel="name"
placeholder="Select state"
formControlName="state"
>
</ng-select>
</div>
<label class="col-md-2 col-form-label" for="cityId">City</label>
<div class="col-md-3">
<ng-select
[items]="citylist"
bindLabel="name"
placeholder="Select city"
formControlName="city"
>
</ng-select>
</div>
</div>
</div>
</div>
</div>
</form>