带有 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 的角度动态表单无法获取值访问器的主要内容,如果未能解决你的问题,请参考以下文章

角度材料将图像放在 <mat-select> 的选定值上

如何使用selenium webdriver找到mat-select

动态表单中的角度验证

表单控件不适用于 Angular Material Mat-select

具有从 JSON 获取的元素组的 Angular 动态表单

将要从mat-select表单中绑定的选定值传递给提交按钮功能