Question

我想创建Angular 7嵌套反应形式。我的要求是，单击“ POC +”按钮，会将POC字段添加到POC FormArray。

要求是单击POC +按钮时，应在addPOCFormFields索引上添加SiteForm => siteName -> POC方法字段。 siteName的数组功能正常工作，但是我不知道如何获取POC FormArray并以正确的索引返回它。

我不了解嵌套反应形式的流程。

模板

    <div mat-dialog-content class="p-24 pb-0 m-0" fusePerfectScrollbar>

      <form [formGroup]="SiteForm">
        <div fxLayout="row" fxLayoutAlign="start start">
          <mat-form-field appearance="outline" fxFlex>
            <mat-label>Organization Name</mat-label>
            <input type="text" matInput name="orgName" formControlName="orgName" />
          </mat-form-field>
        </div>

        <div fxLayout="row" fxLayoutAlign="start start">
          <mat-form-field appearance="outline" fxFlex>
            <mat-label>Type of Organization</mat-label>
            <mat-select [(value)]="selected" name="typeOfOrg" formControlName="typeOfOrg">
              <mat-option value="education">Education</mat-option>
              <mat-option value="communication">communication</mat-option>
            </mat-select>
          </mat-form-field>
        </div>

        <div fxLayout="row" fxLayoutAlign="start start">
          <mat-form-field appearance="outline" fxFlex>
            <mat-label>Select Site</mat-label>
            <input type="text" matInput  name="siteNameVal" formControlName="siteNameVal" />
            <mat-icon matSuffix class="secondary-text addSiteCss" (click)="addSiteDetailsFormFields()">add</mat-icon>
          </mat-form-field>
        </div>



          <div formArrayName="siteName" class="siteFormFields" *ngFor="let site of siteTypeFormFields.controls; let i = index" >
            <div [formGroupName]="i">
              <div fxLayout="row" fxLayoutAlign="start start">
                <mat-form-field appearance="outline" fxFlex>
                  <mat-label>Company Size</mat-label>
                  <input type="number" matInput name="companySize" formControlName="companySize" />
                </mat-form-field>
              </div>

              <div fxLayout="row" fxLayoutAlign="start start">
                <mat-form-field appearance="outline" fxFlex>
                  <mat-label>Address</mat-label>
                  <input type="text" matInput name="address" formControlName="address" />
                </mat-form-field>
              </div>

              <div fxLayout="row" fxLayoutAlign="start start">
                <mat-form-field appearance="outline" fxFlex>
                  <mat-label>POC</mat-label>
                  <input type="text" matInput disabled />
                  <mat-icon matSuffix class="secondary-text addSiteCss" (click)="addPOCFormFields()">add</mat-icon>
                </mat-form-field>
              </div>



              <div formArrayName="siteName" class="siteFormFields" *ngFor="let pocs of getPOCFormField.controls; let poc = index" >
                <div [formGroupName]="poc">

                  <div fxLayout="row" fxLayoutAlign="start start">
                    <mat-form-field appearance="outline" fxFlex>
                      <mat-label>Name</mat-label>
                      <input type="text" matInput name="name" formControlName="name" />
                    </mat-form-field>
                  </div>

                  <div fxLayout="row" fxLayoutAlign="start start">
                    <mat-form-field appearance="outline" fxFlex>
                      <mat-label>Office Phone</mat-label>
                      <input type="number" matInput name="phoneOffice" formControlName="phoneOffice" />
                    </mat-form-field>
                  </div>

                  <div fxLayout="row" fxLayoutAlign="start start">
                    <mat-form-field appearance="outline" fxFlex>
                      <mat-label>Mobile No.</mat-label>
                      <input type="number" matInput name="mobile" formControlName="mobile" />
                    </mat-form-field>
                  </div>

                  <div fxLayout="row" fxLayoutAlign="start start">
                    <mat-form-field appearance="outline" fxFlex>
                      <mat-label>Email</mat-label>
                      <input type="email" matInput name="email" formControlName="email" />
                    </mat-form-field>
                  </div>

                </div>
              </div>



              <div fxLayout="row" fxLayoutAlign="start start">
                <mat-form-field appearance="outline" fxFlex>
                  <mat-label>Designation</mat-label>
                  <input type="text" matInput name="designation" formControlName="designation" />
                </mat-form-field>
              </div>


              <div fxLayout="row" fxLayoutAlign="start start">
                <mat-form-field appearance="outline" fxFlex>
                  <mat-label>Registration Date</mat-label>
                  <input matInput [matDatepicker]="regDatePicker" name="registrationDate" formControlName="registrationDate">
                  <mat-datepicker-toggle matSuffix [for]="regDatePicker"></mat-datepicker-toggle>
                  <mat-datepicker #regDatePicker></mat-datepicker>
                </mat-form-field>
              </div>


              <div fxLayout="row" fxLayoutAlign="start start">
                <mat-form-field appearance="outline" fxFlex>
                  <mat-label>Contact Given By</mat-label>
                  <input type="text" matInput name="contactGivenBy" formControlName="contactGivenBy" />
                </mat-form-field>
              </div>


              <div fxLayout="row" fxLayoutAlign="start start">
                <mat-form-field appearance="outline" fxFlex>
                  <mat-label>Schedule Starts From</mat-label>
                  <input matInput [matDatepicker]="scheduleDatePicker" name="scheduleStartsFrom" formControlName="scheduleStartsFrom">
                  <mat-datepicker-toggle matSuffix [for]="scheduleDatePicker"></mat-datepicker-toggle>
                  <mat-datepicker #scheduleDatePicker></mat-datepicker>
                </mat-form-field>
              </div>


              <div fxLayout="row" fxLayoutAlign="start start">
                <mat-form-field appearance="outline" fxFlex>
                  <mat-label>Type of Organization</mat-label>
                  <mat-select [(value)]="selected">
                    <mat-option value="education">Education</mat-option>
                    <mat-option value="communication">communication</mat-option>
                  </mat-select>
                </mat-form-field>
              </div>
            </div>



          </div>
      </form>

    <pre>{{this.SiteForm.value | json}}</pre>

    </div>
</div>

组件

    import { Component, Inject, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl,FormArray , Validators } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
import { Contact } from 'app/main/components/client-manager/client-manager.model';

@Component({
  selector: 'app-client-form',
  templateUrl: './client-form.component.html',
  styleUrls: ['./client-form.component.scss']
})
export class ClientFormComponent implements OnInit {

  expansionPanelList: any = [];
  SiteForm: FormGroup;

  constructor(
    public matDialogRef: MatDialogRef<ClientFormComponent>,
    @Inject(MAT_DIALOG_DATA) private _data: any,
    private _formBuilder: FormBuilder
  )
  {

  }
  ngOnInit(): void
  {
    this.initSiteForm();
  }


  addSiteForm() {};

  private initSiteForm() {
    let _id = '';
    let organizationName = '';
    let typeOfOrganization = '';

    this.SiteForm = this._formBuilder.group({
      _id                   :   new FormControl(''),
      orgName               :   new FormControl('', Validators.required),
      typeOfOrg             :   new FormControl('', Validators.required),
      siteNameVal           :   new FormControl('', Validators.required),
      siteName              :   this._formBuilder.array([])
    });
  };

  get siteTypeFormFields() {
    return this.SiteForm.get('siteName') as FormArray;
  };

  get getPOCFormField() {
    return ( < FormArray > this.SiteForm.get('siteName')).at(i).controls.POC as FormArray;
  };

  addSiteDetailsFormFields() {
    this.siteTypeFormFields.push(this._formBuilder.group({
      companySize         : new FormControl('', Validators.required),
      address             : new FormControl('', Validators.required),
      POC                 :this._formBuilder.array([]),
      designation         : new FormControl('', Validators.required),
      registrationDate    : new FormControl('', Validators.required),
      contactGivenBy      : new FormControl('', Validators.required),
      scheduleStartsFrom  : new FormControl('', Validators.required),
      scheduleFrequency   : new FormControl('', Validators.required)
    }))

  };

  addPOCFormFields() {
    this.getPOCFormField.push(
      this._formBuilder.group({
        name              : new FormControl('', Validators.required),
        phoneOffice       : new FormControl('', Validators.required),
        mobile            : new FormControl('', Validators.required),
        email             : new FormControl('', Validators.required),
      })
    )
  };
}

Answer 1

您需要在按钮/图标单击（addPOCFormFields(i)）上传递站点索引，以了解在何处创建表单组。

<mat-icon matSuffix class="secondary-text addSiteCss" (click)="addPOCFormFields(i)">add</mat-icon>

  addPOCFormFields(i: number) {
    (( <FormArray> this.SiteForm.get('siteName')).at(i).controls.POC as FormArray).push(
      this._formBuilder.group({
        name              : new FormControl('', Validators.required),
        phoneOffice       : new FormControl('', Validators.required),
        mobile            : new FormControl('', Validators.required),
        email             : new FormControl('', Validators.required),
      })
    )
  };

Angular 7嵌套表单数组无法在click

1 个答案: