Question

我正在尝试创建一个反应形式，下面是它的原型。

我必须创建3个反应形式 Form1，Form2，Form3 ，然后将它们分成单个反应形式，如 SignUpForm 。就像 SignUpForm 是一个由3种不同的反应形式组成的数组。我用Google搜索了FormBuilder，FormArray和FormGroup，但却感到困惑。

Answer 1

使用FormBuilder创建三种形式中的每一种 - Form1，Form2和Form3：

        <!-- Table -->
        <div id="table-container" style="height: 240px; width: 100%; overflow: auto;">
          <mat-table #table
                     class="mat-table"
                     [dataSource]="dataSource"
                     style="height: 100%; padding: 0px; margin: 0px; border-top: 1px solid rgba(0, 0, 0, 0.12);">

            <!--- Note that these columns can be defined in any order.
                The actual rendered columns are set as a property on the row definition" -->
            <!-- Device Name Column -->
            <ng-container matColumnDef="DeviceName">
              <mat-header-cell *matHeaderCellDef mat-sort-header> Device </mat-header-cell>
              <mat-cell *matCellDef="let item"> {{item.deviceName}} </mat-cell>
            </ng-container>

            <!-- Location Name Column -->
            <ng-container matColumnDef="LocationName">
              <mat-header-cell *matHeaderCellDef mat-sort-header> Location </mat-header-cell>
              <mat-cell *matCellDef="let item"> {{item.locationName}} </mat-cell>
            </ng-container>

            <!-- Header Row -->
            <mat-header-row *matHeaderRowDef=""></mat-header-row>
            <!--<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>-->
            <!-- Row Definition -->
            <mat-row *matRowDef="let row; columns: displayedColumns; let index=index;"
                     [ngClass]="setRowClass(index)"
                     (click)="onClickRow(row, $event, index)"
                     (mouseenter)="onMouseEnterRow(index)"
                     (mouseleave)="onMouseLeaveRow(index)">
            </mat-row>

          </mat-table>
        </div>

然后创建一个包含这三个表单组的SignUpForm（form1group，form2group和form3group）。

form1group = this._formBuilder.group({
// Your formControls go here
})

FormArray是一个FormControls数组，在处理动态表单时应该使用它（即需要动态添加新的FormControls时）。

Answer 2

你应该使用FormArray，首先，在你的其他表单导入之上，你需要从Angular表单模块导入FormArray：

<强> app.component.ts

import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
signUpForm: FormGroup;
items: FormArray ;

ngOnInit() {
  this.signUpForm = this.formBuilder.group({
    formName: '',
    formDescription: '',
    items: this.formBuilder.array([ this.createItem() ])
  });
   this.addItem()
   this.addItem();
}

createItem(): FormGroup {
  return this.formBuilder.group({
    field1: '',
    field2: ''
  });
}

addItem(): void {
  this.items = this.signUpForm.get('items') as FormArray;
  this.items.push(this.createItem());
}

html：

中的

<div formArrayName="items"
  *ngFor="let item of signUpForm.get('items').controls; let i = index;">
  <div [formGroupName]="i">
    <input formControlName="field1" placeholder="field1">
    <input formControlName="field2" placeholder="field1">
  </div>
</div>

现在，当用户点击添加新项目或在我们的组件中执行此操作时，就像在模板中调用我们的addItem方法一样简单。

反应性形成一系列其他反应形式

2 个答案: