Question

我以为我在嵌套表单中有一个垫选择问题，但事实证明我在表单上存在.value .control的问题，不确定如何解决

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

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

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

当点击编辑按钮时，我会隐藏/显示要编辑的输入字段，而只是查看。

我与for循环有关的问题

* ngFor =“使widgetForm.get（'types'）。value; type;

这些值显示得很好，但是如果我按下“编辑”按钮，浏览器将挂起，最终我的输入字段出现，但我无法在其受尊重的字段中编辑这些值

如果我将for循环更改为此

* ngFor =“让类型为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位于嵌套组中还是使用表单构建器时，我需要做一些特别的事情吗？

Answer 1

无论如何，我找到了解决方案……

我改变了我的

* ngFor =“让类型为widgetForm.get（'types'）。value

到

* ngFor =“让widgetForm.get（'types'）。controls {{item.value.reason}}等类型...而不是{{type.reason}}

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

引用

嵌套表单和.control与.value-需要帮助

1 个答案: