angular - Angular Reactive Forms:mat-select 的 FormArray
问题描述
我需要创建一个 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 材质控件
解决方案
我想也许你需要让你的 arrayFormControl 具有反应性
<span [formArrayName]="coordinators"...>
推荐阅读
- r - R中的火山图:添加细节:仅着色公因数
- vbscript - vbscript InputBox 确保非空值
- java - 数据库连接已关闭 - 但连接不为空
- python - 使用 cython 比 struct.pack 更快
- javascript - 如何使用javascript或react检查touchevent是否存在?
- python - Tiktok Webscraping 使用 Beautifulsoup,但没有从频道获取视频 url 或视频 id
- python - 我可以将列表中的 2 个连续空字符串合并为 1 个空字符串,这样当我们有 4 个空字符串时,它应该合并并生成 2 个空字符串
- php - laravel + react 不使用 localhost 加载 React 的东西(没有 php artisan serve)
- spring-boot - Spring Boot logback-spring.xml 在路径 /var/log 下创建一个日志文件,即使在 xml 和 application.properties 文件中定义了自定义日志路径
- .net-core - 验证注解 - 实体框架核心