javascript - 如何使用formgroups的formarray进行角度的mat-select
问题描述
我正在做一件我需要一个可以选择多个值的材料选择框的作品。选择框中的值来自具有对象数组的 API。我的要求是当用户在选择框中选择任何值时创建一个表单组的表单数组。
例如:
选择框有类别列表。类别列表基本上是类别对象的列表。当我选择任何类别值时,我希望表单创建一个类别对象的表单数组。
.html:
<div formArrayName="category">
<div *ngFor="let x of myForm.get('category')['controls'];let i = index">
<div [formGroupName]="i">
<mat-form-field appearance="outline">
<mat-label>Category</mat-label>
<mat-select [formControlName]="name" multiple>
<mat-option [value]="category.name"
*ngFor="let category of categories">
{{category.name}}
</mat-option>
</mat-select>
<!--
<mat-error *ngIf="myForm.controls.category.touched && myForm.controls.category.invalid">
<span *ngIf="myForm.controls.category.errors.required">Please select category</span>
</mat-error>-->
</mat-form-field>
</div>
</div>
</div>
.ts :
category:this.fb.array([this.fb.group({
"name":['']
})]),
当我选择任何值时,我会得到这样的输出
类别:数组(1) 0: 名称:数组(2) 0:《财经》 1:“数据科学”
我想要这样的输出:
类别:数组(1) 0: 名称:数组(2) 0:《财经》 1: 名称:数组(2) 0:“数据科学”
有人可以帮我解决这个问题吗?
解决方案
是
<div *ngFor="let x of myForm.get('category').controls;let i = index">
更好的是使用吸气剂,否则 Angular 在生产中会给你一个错误
get categoriesArray()
{
return this.myForm.get('category') as FormArray
}
//And use
<div *ngFor="let x of categoriesArray.controls;let i = index">
并且 formControlName 没有[
]
<mat-select formControlName="name" multiple>
推荐阅读
- spring - 记录参数化的 url
- bash - 在 git 别名中设置环境变量
- javascript - Angular Firestore - 显示子文档数组的内容
- python - 如果页面在循环 1 后自动刷新并且不想在 Selenium 中继续循环 2,如何循环
- docker - 在这种情况下,我应该如何运行 docker?
- python - 不使用win32com刷新excel电子表格
- arrays - 如何在邮递员的条件基础上从 JSON 响应数组中提取变量?
- android - VPN 服务:来自本机库的隧道接口 write() 不会将 pkt 转发到终端应用程序
- robotframework - pywin32 在不受支持或无效的轮子/机器人框架中
- xamarin - 适用于 Xamarin 表单和许多用户实例的 Akavache