[英]Angular Reactive Forms: FormArray of mat-select
I need to create a Form with a FormArray of mat-select controls (CoordinatorX) as displayed in below Pic: 我需要创建一个带有mat-select控件(CoordinatorX)的FormArray的Form,如下图所示:
The code that produce the above Form is as follows: 产生以上表格的代码如下:
component.html: component.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>
component.ts: component.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 : ''
})]),
});
Upto this point, it works well. 到目前为止,它运行良好。 I am able to select the options from any of the 3
mat-select
controls. 我可以从3个
mat-select
控件中mat-select
任何一个。
But I try adding another coordinator dynamically by the following code: 但是我尝试通过以下代码动态添加另一个协调器:
addCoordinator() {
this.coordinators.push(this.fb.group({
id : '',
name : '',
phone : '',
email : ''
}));
console.log(this.eventForm);
}
It adds a new control as expected. 它按预期添加了新控件。 But when I click on it, it is not showing the options.
但是当我单击它时,它没有显示选项。 Any further dynamically added
mat-select
controls are not working right. 任何进一步动态添加的
mat-select
控件均无法正常工作。
Any help please? 有什么帮助吗?
PS: I am using Angular material controls PS:我正在使用Angular材质控件
我认为也许您需要使您的arrayFormControl反应
<span [formArrayName]="coordinators"...>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.