在动态创建某些表单字段的情况下，如何处理反应式表单和字段验证？

问题描述

我正在使用PrimeNG进行Angular项目，但是我有以下问题需要使用反应形式来解决。

基本上在我的HTML中，有一些东西可以渲染这个：

基本上，感兴趣的字段是表示“项目订单ID”的 Commessa 字段。我认为有时候在英语商务语言中使用WSS词（工作分解结构）。

这是我目前正在使用的代码：

<div class="row">
  <div class="col-2">
    <p>Commessa</p>
  </div>
  <div class="col-10">
    <input id="commessa" class="p-invalid" aria-describedby="commessa-help" formControlName="commessa" type="text" pInputText required/>
    <i class="pi pi-plus-circle"></i>
  </div>
</div>

因此，在我的TypeScript组件代码中“提交”表单（这不是真正的提交）时，我有以下 orderForm 对象：

orderForm: FormGroup;

初始化为 ngOnInit（）的

，它为在我的表单中定义的所有字段设置验证规则：

ngOnInit() {
    this.orderFormValues = new OrderFormValues();

    console.log("orderFormValues VALUES: " + this.orderFormValues.statoOrdine);

    this.orderForm = this.fb.group({
    idOrdine: [null,[Validators.required]],dataInserimentoOrdine: [new Date(),statoOrdine: [null,[Validators.required,Validators.minLength(5)]],commessa: [null,CIG: [null,Validators.pattern("^[a-zA-Z0-9]{10}$")]],dataInizioAttivita: [null,dataFineAttivita: [null,referente: [null,ruoloReferente: [null,tipologiaDiPartecipazione: [null,quotaPercentualeDiRTI: [null,[Validators.max(100)]],cliente: [null,vatCliente: [null,clienteFinale: [null,[]],vatClienteFinale: [null,tipologiaContratto: [null,importoContratto: [null,linkContratto: [null,dataSottoscrizioneContratto: [null,nomeSocieta: [null,vatSocieta: [null,buName: [null,presenzaAQ: [false,linkIdentificativoAQ: [null,accordoQuadro: [null,residuoAccordoQuadro: [null,compagineDiAQ: [null,[]]
});

直到现在，我只添加一个“ Commessa”字段（因为用例预见了由我的表单表示的单个订单的单个ID订单）。但是现在情况发生了变化，我必须为一个订单处理多个ID订单。所以我需要n个“ Commessa”字段。

实际上，我最初的想法是添加 + 图标：

<i class="pi pi-plus-circle"></i>

单击此图标，FE将添加一个新字段，以为新的ID订单插入第二，第三，... n字段。

问题是在这种情况下如何处理与我的反应形式的验证和协调？实际上，目前，我必须通过HTML中的 formControlName 属性来静态定义将与我的 FormGroup 对象关联的字段。

在目前的具体情况下，我知道：

 <input id="commessa" class="p-invalid" aria-describedby="commessa-help" formControlName="commessa" type="text" pInputText required/>

使用 formControlName =“ commessa”

与以下 FormGroup 元素相关

commessa: [null,

通过这种方式，当用户在前端填写 Commessa 字段时， FormGroup 中的 commessa 元素就会被评估，并检查是否插入的值是否有效。

因此，我想单击 + 按钮添加一个新的输入字段（例如，具有 id =“ commessa_2” 和 formControlName =“ commessa_2” ，但是如何通过后端处理这种情况呢？是否可以将带有其验证器的新元素添加到我的 FormGroup 对象中？

当您不知道表单中字段的确切数量时，什么样的策略才能处理这种动态情况？（这种情况下可以动态创建某些字段）。

如何以一种聪明的方式解决这个问题？

解决方法

Angular为此提供了Form Array。因此，而不是在表单组中创建多个字段。您可以将“ commessa”字段设置为Form Array。这样就可以将字段作为数组动态插入其中。

使用反应性表格 FormArray ，我们可以达到要求。

请参考以下示例 示例代码：

app.component.ts

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

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private fb: FormBuilder) { }
  orderForm = this.fb.group({
    idOrdine: [null,[Validators.required]],commessaList: new FormArray([
      new FormControl('',[Validators.required,Validators.minLength(5)])
    ])
  });

  get commessaList(): FormArray {
    return this.orderForm.get('commessaList') as FormArray;
  }
  onFormSubmit(): void {
    for (let i = 0; i < this.commessaList.length; i++) {
      console.log(this.commessaList.at(i).value);
    }
  }
  addCommessaField() {
    this.commessaList.push(new FormControl('',Validators.minLength(5)]));
  }

  deleteCommessaField(index: number) {
    if (this.commessaList.length !== 1) {
      this.commessaList.removeAt(index);
    }
    console.log(this.commessaList.length);
  }
}

app.component.html

<div class="container">
  <br>
  <form [formGroup]="orderForm" (ngSubmit)="onFormSubmit()">
    <div class="form-group row">
      <label for="idOrdine" class="col-sm-2 col-form-label">Id Ordine</label>
      <div class="col-sm-10">
        <input type="text" formControlName="idOrdine"
          [ngClass]="{'error':orderForm.controls.idOrdine.invalid && orderForm.controls.idOrdine.touched}"
          class="form-control" id="idOrdine">
      </div>
    </div>
    <div formArrayName="commessaList">
      <div class="form-group row">
        <label for="commessa" class="col-sm-2 col-form-label">Commessa</label>
        <div class="col-sm-10">
          <ng-container *ngFor="let commessa of commessaList.controls; index as idx">
            <div class="row">
              <div class="col-sm-8">
                <input type="text" [ngClass]="{'error':commessa.invalid && commessa.touched}" [formControlName]="idx"
                  class="form-control" id="commessa">
              </div>
              <div class="col-sm-2">
                <button type="button" *ngIf="idx===0" (click)="addCommessaField()" class="btn btn-success"
                  [ngClass]="'pad'"><i class="fa fa-plus-circle" aria-hidden="true"></i></button>

                <button (click)="deleteCommessaField(idx)" *ngIf="idx!==0" class="btn btn-danger">
                  <i class="fa fa-trash" aria-hidden="true"></i>
                </button>
              </div>
            </div>
          </ng-container>
        </div>
      </div>
    </div>
    <div>
      <button type="submit" class="btn btn-primary" [disabled]="orderForm.invalid">Save</button>
    </div>
  </form>
</div>

app.component.css

.container {
    margin: 100px;
}
.error{
    background-color: red;
    color:#FFF;
  }

  .row {
    display: flex;
    align-items: baseline;
    justify-content: center;
}

angular angular-forms angular-reactive-forms primeng