我以为我在嵌套表单中有一个mat-select的问题,但事实证明我在表单上存在.value .control的问题,不确定如何解决此问题
所以基本上我有存储在数组中的项目的值,我想在页面上显示它们
项目:item1金额:1.45美元原因:1
项目:item2金额:1.50美元原因:2
单击编辑按钮时,我会隐藏/显示要编辑的输入字段,而只是查看。
我与for循环有关的问题
* ngFor =“让类型为widgetForm.get('types')。value;
这些值显示得很好,但是如果我按下编辑按钮,浏览器将挂起,并且最终我的输入字段显示出来,但是我无法在它们所尊重的字段中编辑这些值
如果我将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位于嵌套组内或使用表单构建器时,我需要做一些特别的事情吗?
我以为我的嵌套表单中有一个mat-select的问题,但事实证明我的表单上有一个.value .control的问题,不确定如何解决,所以基本上我有item的值。 。
无论如何我还是找到了好奇的人...