带有 mat-select 的角度动态表单无法获取值访问器
Posted
技术标签:
【中文标题】带有 mat-select 的角度动态表单无法获取值访问器【英文标题】:Angular dynamic forms with mat-select can't get value accessor 【发布时间】:2020-02-03 11:43:27 【问题描述】:我正在尝试将 mat-select 与表单数组一起使用。由于某种原因,它给了我以下错误: 表单控件没有值访问器,路径为:'profileGroup -> meterings -> 0 -> selected' 用于数组中的每个项目。
<div formGroupName="profileGroup" [class.active]="!show" class="inner-area">
<mat-form-field formArrayName="meterings">
<mat-select multiple>
<div *ngFor="let metering of meteringArray; let i = index">
<div [formGroupName]="i">
<mat-option formControlName="selected" [value]="metering.value">
metering.value.name
</mat-option>
</div>
</div>
</mat-select>
</mat-form-field>
<div>
this.mainForm = this.fb.group(
profileGroup: this.fb.group(
meterings: this.fb.array([]),
from: [""],
to: [""]
)
);
addMetering(metering: Metering)
const control = (this.mainForm.controls["profileGroup"] as FormGroup).get("meterings") as FormArray;
control.push(this.createItem(metering));
createItem(metering: Metering): FormGroup
return this.fb.group(
name: metering.name,
id: metering.meteringId,
selected: false
);
get meteringArray()
return ((this.parent.controls["profileGroup"] as FormGroup).get("meterings") as FormArray).controls;
【问题讨论】:
【参考方案1】:你混合了不同的概念。材质选择多个它是一个存储数组(和对象数组或字符串数组)的控件。然后您遍历一个 simple 元素数组以在这些元素中进行选择。使用 FormArray 没有意义,也没有向 Array 添加元素。所以我想你有一些喜欢
meterings=[
name:"metering 1",id:1
name:"metering 2",id:2
name:"metering 3",id:2
]
this.mainForm = this.fb.group(
profileGroup: this.fb.group(
meterings: [[]],
from: [""],
to: [""]
)
);
.html
<div formGroupName="profileGroup" [class.active]="!show" class="inner-area">
<mat-form-field >
<mat-select fromGroupName="meterings">
<mat-option *ngFor="let metering of meterings; let i = index"
[value]="metering.value">
metering.value.name
</mat-option>
</mat-select>
</mat-form-field>
<div>
你的表单可以获取值,例如
mainform=
profileGroup:
metering:[1,2]
from:''
to:''
另一件事是,正如您在问题中提出的那样,您希望拥有一个 FormControls 的 FormArray。但是你不使用选择多个
this.mainForm = this.fb.group(
profileGroup: this.fb.group(
meterings: this.fb.array([]),
from: [""],
to: [""]
)
);
.html
<div formGroupName="profileGroup" [class.active]="!show" class="inner-area">
<mat-form-field formArrayName="meterings">
<div *ngFor="let metering of meteringArray; let i = index" [formGroupName]="i">
<mat-checkbox formControlName="selected">
</mat-checkbox>
<input mat-input formControlName="name">
<input mat-input formControlName="id">
</div>
</mat-form-field>
</div>
你的 from 可以是这样的
mainform=
profileGroup:
metering:[
id:1,name:"metering 1",true,
id:1,name:"metering 1",false
]
from:''
to:''
【讨论】:
以上是关于带有 mat-select 的角度动态表单无法获取值访问器的主要内容,如果未能解决你的问题,请参考以下文章
如何使用selenium webdriver找到mat-select