Question

我有以下组件类的代码：

import {FormBuilder, FormGroup, Validators, FormControl, FormArray} from '@angular/forms'

...
form: FormGroup
constructor(private _fb: FormBuilder) { }

this.form = this._fb.group({
      name: ['', [Validators.required]],
      sortItem: this._fb.array([
        this.initSort(),
      ])
    });

initSort(){
    return this._fb.group({
      locationName: ['', [Validators.required]],
      locationItems: this._fb.array([
        this.initSortItems()
      ])
    })
  }

initSortItems(){
    return this._fb.group({
      itemName: ['', [Validators.required]],
      itemPicture: ['', []],
    })
  }

addSort(){
    const control = <FormArray>this.form.controls['sortItem'];
    control.push(this.initSort());
  }

addSortLocationItem(i?: number, t?: number){
    // add more locationItems to the sort. This is where I am stuck

// if tried the following with no avail  (<FormArray>this.form.get('sortItem').value[i].controls).push(this.initSortItems());

  }

我正在尝试添加更多locationItems，但我在addSortLocationItem（）方法中尝试过的方法并不起作用。如何访问sortItem正确迭代的表单控件并将多个位置项添加到该迭代中？

这是我的标记：

<div class="">
  <a (click)="addSort()" style="cursor: default">
    Add Sort Locations +
  </a>
</div>

<div formArrayName="sortItem">
  <div *ngFor="let sortLocation of form.controls.sortItem.controls; let i=index">
      <!-- address header, show remove button when more than one address available -->
      <div>
          <span>Location {{i + 1}}</span>
          <span *ngIf="form.controls.sortItem.controls.length > 1"
              (click)="removeAddress(i)">
          </span>
      </div>

      <div [formGroupName]="i">
          <!--name-->
          <div>
              <label>Location Name</label>
              <input type="text" formControlName="locationName">
              <!--display error message if street is not valid-->
              <small [hidden]="form.controls.sortItem.controls[i].controls.locationName.valid">
                  Street is required
              </small>
          </div>

          <div formArrayName="locationItems">
            <div *ngFor="let eachItem of form.controls.sortItem.controls[i].controls.locationItems.controls; let t=index">
                <!-- address header, show remove button when more than one address available -->
                <div class="">
                  <a (click)="addSortLocationItem(i,t)" style="cursor: default">
                    Add Items +
                  </a>
                </div>

                <div>
                    <span>Location Item {{t + 1}}</span>
                    <span *ngIf="form.controls.sortItem.controls[i].controls.locationItems.controls[t].length > 1"
                        (click)="removeAddress(t)">
                    </span>
                </div>

                <div [formGroupName]="t">
                    <!--name---->
                    <div>
                        <label>Item Name</label>
                        <input type="text" formControlName="itemName">
                        <!--display error message if street is not valid-->
                        <small [hidden]="form.controls.sortItem.controls[i].controls.locationItems.controls[t].controls.itemName.valid">
                            Name is required
                        </small>
                    </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>

对此的任何帮助将不胜感激。

Answer 1

如果i是 main index的{{1}}，那么您可以轻松获得以下内容：

control

而且，作为建议，我建议您创建一些变量，以便提高addSortLocationItem(i: number, t: number) { const control = this.sortItem.get(`${i}.locationItems`) as FormArray; control.push(this.initSortItems()); }的可读性。

code

此：

form: FormGroup;
name: FormControl;
sortItem: FormArray;

可以替换为：

<div *ngFor="let sortLocation of form.controls.sortItem.controls; let i=index">
...
<div *ngFor="let eachItem of form.controls.sortItem.controls[i].controls.locationItems.controls; let t=index">

完整的代码：

<div *ngFor="let sortLocation of sortItem.controls; let i = index">
...
<div *ngFor="let eachItem of sortLocation.get('locationItems').controls; let t = index">

PS ：我没有测试过，如果我忘记了什么，请告诉我。

动态添加到angular2中另一个表单数组中的表单数组

1 个答案: