无法找到路径为“ items-> 1”的控件

时间:2019-07-17 17:28:44

标签: angular-material angular7 formbuilder formarray

我正在尝试设置一个表单,该表单将具有使用JSON文件中的数据动态创建的行。但是可以更改该数据,然后在提交记录时更改了哪一行和什么值。我正在使用表单构建器和表单数组以及表单组。

我尝试仅使用表单组,但未在多行上记录更改。我浏览了stackoverflow,找不到如何将表单数组与现有数据一起使用的好例子。

HTML
<form class="quantities" [formGroup]="changes">
            <mat-card class="dpc-item-list"
              *ngFor="let item of category.items; let newItem of aliases.controls; let i = index" formArrayName="items">
              <div class="dpc-item-list" [formGroupName]="i">

                <mat-form-field class="dpc-item description pink">
                  <input matInput value="{{ item.item_desc }}" formControlName="description" readonly>
                </mat-form-field>
 <mat-form-field class="dpc-item quantity">
                  <input matInput value="{{ item.open_qty }}" formControlName="open_qty">
                </mat-form-field>
                <mat-form-field class="dpc-item hold">
                  <input matInput value="{{ item.hold_qty }}" formControlName="hold_qty">
                </mat-form-field>
<mat-form-field class="dpc-item item-num">
                  <input matInput value="#{{ item.item_num }}" formControlName="item_num" readonly>
                </mat-form-field>
                <mat-form-field class="dpc-item comments">
                  <input matInput formControlName="comments">
                </mat-form-field>


Component


    getDpcItems() {
    return this.formBuilder.group({
      description: [""],
      open_qty: [""],
      hold_qty: [""],
      comments: [""],
      item_num: [""]
    });}


  ngOnInit() {

    this.changes = this.formBuilder.group({
      items: this.formBuilder.array([this.getDpcItems()])
    });
}

正试图充分利用数据,并在提交表单时记录所有更改。

0 个答案:

没有答案