Angular 具有嵌套形式数组的角度反应形式

我是Angular 2的新手，决定最好的学习方法是通过官方的Angular指南

我浏览了反应式表单指南

演示链接：

虽然内容总体上相当不错，但我一直在思考如何实现更复杂的表单。在给定的示例中，每个英雄都可能有许多地址。地址本身是平面对象

如果地址有其他信息，如地址所在房间的颜色和类型，该怎么办

导出类地址{
街道=''；
城市=''；
州=''；
zip=“”；
房间=房间[]；
}
出口教室{
类型=“”；
}

所以表单模型看起来像这样

createForm（）{
this.heroForm=this.fb.group({
名称：“”，
秘书长：this.fb.array([
本集团({
街道：''，
城市：''，
声明：''，
zip:“”，
房间：this.fb.array([
本集团({
类型：“”
})]),
})]),
权力：，
伙伴：“”
});

}

编辑-使用ngOnChanges的最终代码

hero-detail.component.ts

createForm（）{
this.heroForm=this.fb.group({
名称：“”，
秘书长：this.fb.array([
本集团({
街道：''，
城市：''，
声明：''，
zip:“”，
房间：this.fb.array([
本集团({
类型：“”
})
])
})
]),
权力：，
伙伴：“”
});
}
ngOnChanges（）{
此为.heroForm.reset({
姓名：this.hero.name，
});
this.setAddresses（this.hero.addresses）；
}
设置地址（地址：地址[]）{
让control=this.fb.array（[]）；
地址。forEach（x=>{
control.push（this.fb.group({
街道：x街，
城市：x城市，
州：x州，
zip:x.zip，
房间：这个。会议室（x）}）
})
this.heroForm.setControl（'secretLairs'，control）；
}
休息室（x）{
设arr=newformarray（[]）
x、 房间。forEach（y=>{
arr.push（this.fb.group（{
类型：y型
}))
})
返回arr；
}

hero-detail.component.html（嵌套表单数组部分）

地址#{i+1}
街道：
城市：
声明：
{{state}}
邮政编码：


会议室{{j+1}
类型：
添加秘密巢穴

嵌套的formarray没有太大区别。基本上你只是复制你的代码。。。使用嵌套数组：）下面是一个示例：

myForm:FormGroup；
构造函数（私有fb:FormBuilder）{
this.myForm=this.fb.group({
//如果愿意，还可以在内部设置初始formgroup
公司：this.fb.array（[]）
})
}
addNewCompany（）{
让control=this.myForm.controls.companys；
控制按钮(
本集团({
公司：['']，
//嵌套表单数组，也可以最初添加表单组
项目：this.fb.array（[]）
})
)
}
删除公司（索引）{
让control=this.myForm.controls.companys；
控件移除（索引）
}

这就是最外层表单数组的添加和删除，因此向嵌套表单数组添加和删除表单组只是复制代码。其中，我们从模板中传递当前formgroup，在本例中，您要向其添加新项目/删除项目

addNewProject（控制）{
控制按钮(
本集团({
项目名称：['']
}))
}
删除项目（控制、索引）{
控件移除（索引）
}

以同样的方式，迭代外部formarray，然后在内部迭代内部formarray：

公司{{i+1}}：
删除公司
项目{j+1}
删除项目
添加新项目

编辑：

若要在获得数据后为表单设置值，可以调用以下方法来迭代数据并为表单设置值。在这种情况下，

数据

如下所示：

数据={
公司：[
{
公司：“示例公司”，
项目：[
{
项目名称：“示例项目”，
}
]
}
]
}

我们调用

setcompanys

为我们的表单设置值：

setCompanies（）{
让control=this.myForm.controls.companys；
this.data.companys.forEach（x=>{
control.push（this.fb.group（{
公司：x公司，
项目：this.setProjects（x）}）
})
}
setProjects（x）{
设arr=newformarray（[]）
x、 projects.forEach（y=>{
arr.push（this.fb.group（{
projectName:y.projectName
}))
})
返回arr；
}

以下是我所做的 我使用angularflexlayout和AngularMaterial，你可以使用任何库，只是想向你展示功能

     <form [formGroup]="editForm" novalidate fxLayout="column"
        autocomplete="off">

    <div fxLayout="row wrap" fxLayoutGap="2em">
      <mat-form-field [fxFlex]="30">
        <mat-label>Name</mat-label>
        <input matInput formControlName="name" width="800px"/>
      </mat-form-field>

    </div>
    <div fxLayout="column" fxLayoutGap="3em">
      <div fxLayout="row wrap" fxFlex="40" fxLayoutGap="2em">
        <div formArrayName="phones" fxFlex="50" fxLayoutGap="8px" *ngFor="let phone of Phones.controls;let i= index">
          <mat-form-field fxFlex="100" [formGroupName]="i">
            <mat-label>Phone</mat-label>
            <input matInput formControlName="phone"/>
          </mat-form-field>
        </div>
        <button type="button" mat-stroked-button color="primary" (click)="addPhone()">add</button>
      </div>
      <div fxLayout="row wrap" fxFlex="40" fxLayoutGap="2em">
        <div formArrayName="emails" fxFlex="50" fxLayoutGap="8px" *ngFor="let email of Emails.controls;let i= index">
          <mat-form-field fxFlex="100" [formGroupName]="i">
            <mat-label>Email</mat-label>
            <input matInput formControlName="email"/>
          </mat-form-field>
        </div>
        <button type="button" mat-stroked-button color="primary" (click)="addEmail()">add</button>
      </div>
    </div>

    <div class="mr-2" fxLayoutAlign="end" mat-dialog-actions>
      <button type="button" (click)="cancelDialog()" mat-button
              mat-dialog-close>Cancel
      </button>

      <button type="button" (click)="onSubmit()"
              mat-raised-button
              color="primary">
        Submit
      </button>
    </div>

  </form>

  editForm: FormGroup;
  phones: FormArray;
  emails: FormArray;

  createForm() {
    this.editForm = this.fb.group({
      name: [''],
        phones: this.fb.array([this.createPhone()]),
      emails: this.fb.array([this.createEmail()]),
     });

  }

  get Phones() {
    return this.editForm.get('phones') as FormArray;
  }

  get Emails() {
    return this.editForm.get('emails') as FormArray;
  }

 createPhone() {
    return this.fb.group(({
      phone: '',
    }));
  }

  createEmail() {
    return this.fb.group(({
      email: ''
    }));
  }


  addPhone(): void {
    this.phones = this.editListingForm.get('phones') as FormArray;
    this.phones.push(this.createPhone());
  }

  addEmail(): void {
    this.emails = this.editListingForm.get('emails') as FormArray;
    this.emails.push(this.createEmail());
  }

                    <tr formArrayName="entries"
                        *ngFor="let field of entriesGroup.get('entries').controls; let ind1 = index;">
                        <td [formGroupName]="ind1">
                            <input type="text" disabled formControlName="date1" name="date1"
                                class="form-control">
                        </td>


                        <td [formGroupName]="ind1" *ngIf="hideHeaders">
                            <div formGroupName="odometerReadingDetails">
                                <input type="text" formControlName="startingLocation" name="startingLocation"
                                    class="form-control">
                            </div>
                        </td>
                        <td [formGroupName]="ind1" *ngIf="hideHeaders">
                            <div formGroupName="odometerReadingDetails">
                                <input type="text" formControlName="endingLocation" name="endingLocation"
                                    class="form-control">
                            </div>
                        </td>


                        <td [formGroupName]="ind1" *ngIf="hideHeaders">
                            <div formGroupName="odometerReadingDetails">
                                <input type="text" formControlName="odometerReadStartingPoint"
                                    name="odometerReadStartingPoint" class="form-control"
                                    [ngModel]="ind1!=0?entriesGroup.get('entries').controls[ind1-1].get('odometerReadingDetails').get('odometerReadEndingPoint').value:field.get('odometerReadingDetails').get('odometerReadStartingPoint').value">
                            </div>
                        </td>
                        <td [formGroupName]="ind1" *ngIf="hideHeaders">
                            <div formGroupName="odometerReadingDetails">
                                <input type="text" formControlName="odometerReadEndingPoint"
                                    name="odometerReadEndingPoint" class="form-control"
                                    [ngModel]="ind1<entriesGroup.get('entries').controls.length-1?entriesGroup.get('entries').controls[ind1+1].get('odometerReadingDetails').get('odometerReadStartingPoint').value:field.get('odometerReadingDetails').get('odometerReadEndingPoint').value">
                            </div>
                        </td>
                        <td [formGroupName]="ind1" *ngIf="hideHeaders">
                            <div formGroupName="odometerReadingDetails">
                                <input type="text" disabled formControlName="odometerReadForOfficial"
                                    name="odometerReadForOfficial" class="form-control"
                                    [ngModel]="field.get('odometerReadingDetails').get('totalKilometersCovered').value-field.get('odometerReadingDetails').get('odometerReadForPersonal').value">
                            </div>
                        </td>
                        <td [formGroupName]="ind1" *ngIf="hideHeaders">
                            <div formGroupName="odometerReadingDetails">
                                <input type="text" formControlName="odometerReadForPersonal"
                                    name="odometerReadForPersonal" class="form-control">
                            </div>
                        </td>
                        <td [formGroupName]="ind1" *ngIf="hideHeaders">
                            <div formGroupName="odometerReadingDetails">
                                <input type="text" disabled formControlName="totalKilometersCovered"
                                    name="totalKilometersCovered" class="form-control"
                                    [ngModel]="field.get('odometerReadingDetails').get('odometerReadEndingPoint').value!=0?field.get('odometerReadingDetails').get('odometerReadEndingPoint').value-field.get('odometerReadingDetails').get('odometerReadStartingPoint').value:0">
                            </div>
                        </td>
                        <td [formGroupName]="ind1" *ngIf="hideHeaders">
                            <div formGroupName="odometerReadingDetails">
                                <textarea rows="2" cols="20" type="text" formControlName="particularTravel"
                                    name="particularTravel" class="form-control">

                         </textarea>
                            </div>
                        </td>



                        <td [formGroupName]="ind1" *ngIf="fuelHide">
                            <div formGroupName="fuelDetails">
                                <input type="text" formControlName="fuelFilled" name="fuelFilled"
                                    class="form-control">
                            </div>
                        </td>
                        <td [formGroupName]="ind1" *ngIf="fuelHide">
                            <div formGroupName="fuelDetails">
                                <input type="text" formControlName="costPerLiter" name="costPerLiter"
                                    class="form-control">
                            </div>
                        </td>
                        <td [formGroupName]="ind1" *ngIf="fuelHide">
                            <div formGroupName="fuelDetails">
                                <input type="text" disabled formControlName="costOfTheFuel" name="costOfTheFuel"
                                    class="form-control"
                                    [ngModel]="field.get('fuelDetails').get('costPerLiter').value * field.get('fuelDetails').get('fuelFilled').value">
                            </div>
                        </td>

                        <td [formGroupName]="ind1" *ngIf="fuelHide">
                            <div formGroupName="fuelDetails">
                                <input type="text" disabled formControlName="fuelConsumption"
                                    name="fuelConsumption" class="form-control"
                                    [ngModel]="field.get('fuelDetails').get('costOfTheFuel').value!=0?(ind1!=0?(entriesGroup.get('entries').controls[ind1-1].get('fuelDetails').get('fuelConsumption').value + field.get('fuelDetails').get('costOfTheFuel').value):field.get('fuelDetails').get('costOfTheFuel').value):0">
                            </div>
                        </td>
                        <td [formGroupName]="ind1" *ngIf="NoNeed">
                            <div formGroupName="fuelDetails">
                                <input type="text" formControlName="requestId" name="requestId"
                                    class="form-control">
                            </div>
                        </td>
                        <td [formGroupName]="ind1" *ngIf="fuelHide">
                            <div formGroupName="fuelDetails">
                                <input type="text" formControlName="couponCode" name="couponCode"
                                    class="form-control">
                            </div>
                        </td>
                        <td [formGroupName]="ind1" *ngIf="hideDate">
                            <div formGroupName="fuelDetails">
                                <input type="text" formControlName="couponDate" name="couponDate"
                                    placeholder="date1,date2,..." class="form-control">
                            </div>
                        </td>

                        <td [formGroupName]="ind1" *ngIf="fuelHide">
                            <div formGroupName="fuelDetails">
                                <input type="text" formControlName="couponNumber" name="couponNumber"
                                    placeholder="coupon1,coupon2,..." class="form-control">
                            </div>
                        </td>

                        <td [formGroupName]="ind1" *ngIf="hideDate">
                            <div formGroupName="fuelDetails">
                                <input type="text" formControlName="couponsAmount" name="couponsAmount"
                                    class="form-control">
                            </div>
                        </td>

                        <td [formGroupName]="ind1" *ngIf="repaireHide">
                            <div formGroupName="vehicleRepairDetails">
                                <input type="text" formControlName="totalKmsCoveredBeforeRepair"
                                    name="totalKmsCoveredBeforeRepair" class="form-control" readonly
                                    [ngModel]="field.get('odometerReadingDetails').get('totalKilometersCovered').value">
                            </div>
                        </td>

                        <td [formGroupName]="ind1" *ngIf="repaireHide">
                            <div formGroupName="vehicleRepairDetails">
                                <input type="text" formControlName="sparesCost" name="sparesCost"
                                    class="form-control">
                            </div>
                        </td>

                        <td [formGroupName]="ind1" *ngIf="repaireHide">
                            <div formGroupName="vehicleRepairDetails">
                                <input type="text" formControlName="labourCost" name="labourCost"
                                    class="form-control">
                            </div>
                        </td>


                        <td [formGroupName]="ind1" *ngIf="repaireHide">
                            <div formGroupName="vehicleRepairDetails">
                                <input type="text" formControlName="vehicleRepaireCost"
                                    name="vehicleRepaireCost" class="form-control"
                                    [ngModel]="field.get('vehicleRepairDetails').get('sparesCost').value*1 + field.get('vehicleRepairDetails').get('labourCost').value*1">
                            </div>
                        </td>
                        <td [formGroupName]="ind1" *ngIf="repaireHide">
                            <div formGroupName="vehicleRepairDetails">

                                <textarea rows="2" cols="20" type="text" formControlName="particularsOfRepairs"
                                    name="particularsOfRepairs" class="form-control">

                           </textarea>
                            </div>
                        </td>
                        <td [formGroupName]="ind1" *ngIf="workShop">
                            <div formGroupName="vehicleRepairDetails">
                                <select formControlName="workshopId" class="form-control"
                                    (click)="workshopDetails1($event,ind1)">

                                    <option *ngFor="let i of workshopdata"
                                        [selected]="i.workShopId==field.get('vehicleRepairDetails').get('workshopId').value">
                                        {{i.workShopId}}</option>
                                    <option value="others">OTHERS</option>
                                </select>
                            </div>
                        </td>


                        <td [formGroupName]="ind1" *ngIf="workShop">
                            <div formGroupName="vehicleRepairDetails">
                                <textarea rows="2" cols="50" type="text" formControlName="workshopAddress"
                                    name="workshopAddress" class="form-control">
           </textarea>
                            </div>
                        </td>

                        <td [formGroupName]="ind1" *ngIf="workShop">
                            <div formGroupName="vehicleRepairDetails">
                                <input type="text" formControlName="workshopContactNumber"
                                    name="workshopContactNumber" class="form-control">
                            </div>
                        </td>

                        <td [formGroupName]="ind1" *ngIf="workShop">
                            <div formGroupName="vehicleRepairDetails">

                                <textarea rows="2" cols="50" type="text"
                                    formControlName="workshopAccountDetails" name="workshopAccountDetails"
                                    class="form-control">
           </textarea>
                            </div>
                        </td>
                        <td [formGroupName]="ind1" *ngIf="repaireHide">
                            <div formGroupName="vehicleRepairDetails">
                                <input type="text" formControlName="requestId" name="requestId"
                                    class="form-control">
                            </div>
                        </td>




                        <td [formGroupName]="ind1" *ngIf="driverHide">
                            <div formGroupName="driverChargesDetails">
                                <select formControlName="categoryType" class="form-control"
                                    (click)="onCatType1($event,ind1)">
                                    <option>Choose</option>
                                    <option *ngFor="let i of driverChargesLimit"
                                        [selected]="i.categoryType==field.get('driverChargesDetails').get('categoryType').value">
                                        {{i.categoryType}}</option>

                                </select>
                            </div>
                        </td>

                        <td [formGroupName]="ind1" *ngIf="driverHide">
                            <div formGroupName="driverChargesDetails">
                                <input type="text" formControlName="amount" name="amount" class="form-control"
                                    disabled>
                            </div>
                        </td>

                        <td [formGroupName]="ind1" *ngIf="driverHide">
                            <div formGroupName="driverChargesDetails">
                                <input type="time" formControlName="startingTime" name="startingTime"
                                    class="form-control" (change)="onStartTime1($event,ind1)">
                            </div>
                        </td>

                        <td [formGroupName]="ind1" *ngIf="driverHide">
                            <div formGroupName="driverChargesDetails">
                                <input type="time" formControlName="endingTime"
                                    (change)="onEndTime1($event,ind1)" name="endingTime" class="form-control">
                            </div>
                        </td>

                    </tr>

                </tbody>
            </div>
        </table>