时间戳

首页 > 解决方案 > Angular - 嵌套数组和表单构建器映射

angular - Angular - 嵌套数组和表单构建器映射

问题描述

我有一段代码，我不能不处理映射表单。你能帮我理解这个吗？在这种情况下将 formGroupName 放在哪里以及如何引用数组中的位置？

我的组件：

ngOnInit() {
    this.poaGroups = this._fb.array(this.getGroups().map(unit => this._fb.group(unit)));
    this.poaForm = this._fb.group({
      // other groups
      permissions: this.poaGroups
    });
  }
getGroups() {
  const groupControlArray = [];
  for (let i = 0; i < this.listOfUnits.length; i++) {
    if (this.listOfUnits[i].unit_id.valueOf() === this.link_unit_id) {
      for (let j = 0; j < this.listOfCauses.length; j++) {
        if (this.listOfCauses[j].cause_id.valueOf() === this.listOfUnits[i].cause_id.valueOf()) {
          groupControlArray.push({
            unit_id: [''],
            unit: [''],
            scope_id: [''],
            scope: ['']
          });
        }
      }
    }
  }
  return groupControlArray;
}

和简化视图（删除了大多数材料组件） - 完全卡住了：

<div formArrayName="permissions">
  <div *ngFor="let unit of listOfUnits | tSearch: link_unit_id : 'unit'; let i = index">
  <div formControlName="unit">
    {{unit.unit}}
  </div>
    <mat-selection-list>
      <mat-list-option *ngFor="let cause of listOfCauses | tSearch: listOfUnits[i].cause_id : 'cause'; let j = index">
        <div formControlName="scope">
          {{cause.scope}}
        </div>
      </mat-list-option>
    <mat-selection-list>
  </div>
</div>

标签： angulartypescript

解决方案

在组件中查看表单定义也会有所帮助。

但是要回答您的问题，您可以使用i索引来引用数组中的位置。

这是我的 HTML 示例：

                <div formArrayName="addresses" *ngFor="let address of addresses.controls; let i=index">
                    <div [formGroupName]="i">
                        <div class="form-group" >
                            <label class="col-md-2 control-label"
                                   attr.for="{{'addressType1Id' + i}}">Address Type</label>
                            <div class="col-md-8">
                                <label class="radio-inline">
                                    <input type="radio" id="{{'addressType1Id' + i}}" value="home"
                                    formControlName="addressType">Home
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" id="{{'addressType1Id' + i}}" value="work"
                                    formControlName="addressType">Work
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" id="{{'addressType1Id' + i}}" value="other"
                                    formControlName="addressType">Other
                                </label>
                            </div>
                        </div>

                        <div class="form-group"
                             [ngClass]="{'has-error': (address.controls.street1.touched || 
                                                  address.controls.street1.dirty) && 
                                                  !address.controls.street1.valid }">
                            <label class="col-md-2 control-label"
                                   attr.for="{{'street1Id' + i}}">Street Address 1</label>
                            <div class="col-md-8">
                                <input type="text" 
                                    class="form-control" 
                                    id="{{'street1Id' + i}}" 
                                    placeholder="Street address"
                                    formControlName="street1">
                                <span class="help-block" *ngIf="(address.controls.street1.touched || address.controls.street1.dirty) && address.controls.street1.errors">
                                  <span *ngIf="address.controls.street1.errors.required">
                                      Please enter your street address.
                                  </span>
                                </span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-2 control-label" 
                                   attr.for="{{'street2Id' + i}}">Street Address 2</label>
                            <div class="col-md-8">
                                <input type="text" 
                                    class="form-control" 
                                    id="{{'street2Id' + i}}"
                                    placeholder="Street address (second line)"
                                    formControlName="street2">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-md-2 control-label" 
                                attr.for="{{'cityId' + i}}">City, State, Zip Code</label>
                            <div class="col-md-3">
                                <input type="text" 
                                    class="form-control" 
                                    id="{{'cityId' + i}}" 
                                    placeholder="City"
                                    formControlName="city">
                            </div>
                        </div>
                    </div>
                </div>

推荐阅读