我需要创建一个 FormArray 的 mat-select 控件(CoordinatorX),如下图所示:
产生上述表格的代码如下:
组件.html:
<span formArrayName="coordinators" class="col-12" *ngIf="coordinators.controls.length > 0">
<span class="row" *ngFor="let coord of coordinators.controls; let i = index" [formGroupName]="i">
<mat-form-field class="col-10 col-md-11 col-lg-10">
<mat-select formControlName="name" placeholder="Coordinator {{i}}">
<mat-option [value]="admin.name" *ngFor="let admin of (cNgo$ | async)?.admin"> {{ admin.phone}} - {{ admin.name }} </mat-o
</mat-select>
</mat-form-field>
<div class="col-2 col-md-1 col-lg-2">
<button type="button" (click)="removeCoordinator(i)" mat-icon-button *ngIf="i > 0">
<mat-icon aria-label="Delete">delete</mat-icon>
</button>
</div>
</span>
</span>
组件.ts:
return this.fb.group({
name : ['', [
Validators.required,
Validators.minLength(v.name.minLength),
Validators.maxLength(v.name.maxLength)
]],
shortCode : ['', [
Validators.required,
Validators.minLength(v.shortCode.minLength),
Validators.maxLength(v.shortCode.maxLength)
], [
EventValidator.shortCodeValidator(that.http)
]],
coordinators : this.fb.array([this.fb.group({
id : '',
name : '',
phone : '',
email : ''
}), this.fb.group({
id : '',
name : '',
phone : '',
email : ''
}), this.fb.group({
id : '',
name : '',
phone : '',
email : ''
})]),
});
到目前为止,它运作良好。我可以从 3 个mat-select
控件中的任何一个中选择选项。
但我尝试通过以下代码动态添加另一个协调器:
addCoordinator() {
this.coordinators.push(this.fb.group({
id : '',
name : '',
phone : '',
email : ''
}));
console.log(this.eventForm);
}
它按预期添加了一个新控件。但是当我点击它时,它没有显示选项。任何进一步动态添加mat-select
的控件都无法正常工作。
请问有什么帮助吗?
PS:我正在使用 Angular 材质控件