如何解决如何使用formgroups的formarray进行角度选择
我正在一件作品上,我需要一个可以选择多个值的材料选择框。选择框中的值来自具有对象数组的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":['']
})]),
当我选择任何值时,我都会得到这样的输出
category: Array(1) 0: name: Array(2) 0: "Finance & Economics" 1: "Data Science"
我想要这样的输出:
category: Array(1) 0: name: Array(2) 0: "Finance & Economics" 1: name: Array(2) 0: "Data Science"
有人可以帮我解决这个问题吗?
解决方法
是
<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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。