嵌套表单和 .control vs .value - 需要帮助答案

【问题标题】：nested forms and .control vs .value - help needed嵌套表单和 .control vs .value - 需要帮助
【发布时间】：2019-03-02 03:25:50
【问题描述】：

我以为我在嵌套表单中遇到了 mat-select 问题，但事实证明我的表单上的 .value .control 有问题，不知道如何解决

所以基本上我有存储在数组中的项目的值，我想在页面上显示它们

项目：项目 1 金额：1.45 美元原因：1

项目：项目2 金额：1.50 美元原因：2

单击编辑按钮时，我会隐藏/显示输入字段以进行编辑而不是仅查看。

我遇到的问题与 for 循环有关

*ngFor="let type of widgetForm.get('types').value;

值显示得很好，但如果我点击编辑按钮，浏览器会挂起，最终我的输入字段会显示，但我无法在他们尊重的字段中编辑值

如果我将 for 循环更改为此

*ngFor="let type of widgetForm.get('types').controls;

我没有显示任何值，但我可以单击编辑并编辑所有信息。所以我不知道我是怎么吃蛋糕的……基本上是循环遍历我的数组来显示它，然后编辑它

这是我在 ts 中的表单生成器

this.widgetService.getWidgetTypes(this.widget.type).subscribe(types => {
  this.widgetTypes = types   

  let elements: FormGroup[]
  for (let index = 0; index < this.widgetTypes .length; index++) {
    const element = this.widgetTypes [index];
    const controls = <FormArray>this.widgetForm.controls['types']
    controls.push(
      this.formBuilder.group({
        item: [element.item, Validators.required],
        amount: element.amount,
        reason: element.reason
      })
    )
  }
})

我的 html 看起来像

    <div [formGroup]="widgetForm">
       <div formArrayName="types" *ngFor="let type of widgetForm.get('types').value; let i = index;">
         <div [formGroupName]="i" >
         <ng-container *ngIf="readOnly[i]">
           <div>
             <dl>
                <dt>Item:<dd>
                <dd>{{ type.item }}<dd>
             <dl>
              <dl>
                <dt>Amount:<dd>
                <dd>{{ type.amount }}<dd>
             <dl>
              <dl>
                <dt>Reason:<dd>
                <dd>{{ type.reason }}<dd>
             <dl>
           <div>
           <div><i class="icon-edit" (click)="editItem(i)"></i></div>
           </ng-container>
           <ng-container *ngIf="!readOnly[i]">
           <div class="col">
             <mat-form-field >
              <input matInput placeholder="Item" formControlName="item"/>
             </mat-form-field>
           </div>
           <div class="col">
            <mat-form-field >
             <input matInput placeholder="Amount" formControlName="amount"/>
            </mat-form-field>
           </div>
           <div class="col">
            <mat-form-field>
             <mat-select placeholder="Reason" formControlName="reason">
              <mat-option>{{ type.reason }}</mat-option>
              <mat-option value="1">Duplicate Payment</mat-option>
              <mat-option value="2">Incorrect Amount</mat-option>
              <mat-option value="3">Lost/Stolen</mat-option>
              <mat-option value="4">Expired</mat-option>
            </mat-select>
           </mat-form-field>
         </div>
       </ng-container>
       </div>
      </div>
     </div>

当 mat-select 在嵌套组中或使用表单构建器时，我是否需要做一些特别的事情？

【问题讨论】：

标签： angular select angular-material

【解决方案1】：

不管谁好奇，我都找到了解决办法……

我换了

*ngFor="let type of widgetForm.get('types').value

到

*ngFor="let type of widgetForm.get('types').controls {{ item.value.reason }} etc...而不是 {{ type.reason }}

然后当我引用 readOnly 值时，它们被

引用

【讨论】：