如何在 FormArray 上触发验证？

Question

我有一个包含对象的表单。在这个对象中，我有两个“正常”属性和一个表单数组。在我的情况下，我需要检查表单数组中的对象字段是端口还是端口范围。为此，我有一个正则表达式。但在我的情况下，验证从未显示（没有红色输入字段或 mat-error）。

打字稿

this.myForm = this.fb.group({

      name: ['', [Validators.required, Validators.pattern('^[a-zA-Z0-9._-\\s]*$')]],

      description: ['', Validators.maxLength(255)],

      elements: new FormArray([this.createElement()])

    });

...

createElement(): FormGroup {

    return this.fb.group({

      'portRanges': ['', [Validators.required]],

      'protocol': ['',[Validators.required, Validators.pattern('^\d+$|^\d+-\d+$')]]

    });

}

<div formArrayName="elements" *ngFor="let e of elements.controls; let i = index;">

  <div [formGroupName]="i">

    <mat-form-field class="field">

      <input tabindex="3" matInput placeholder="Port or range *" formControlName="portRanges"/>

      <mat-error>Between 0 and 65535, or a range of two such numbers separated by a dash ( - )</mat-error>

    </mat-form-field>

    <mat-radio-group aria-label="Select a protocol" [ngStyle]="getStyle(e)" formControlName="protocol">

      <mat-radio-button value="TCP" tabindex="4">TCP</mat-radio-button>

      <mat-radio-button value="UDP" tabindex="5">UDP</mat-radio-button>

    </mat-radio-group>

    <div style="display: flex">

      <div>

        <div *ngIf="i === elements.controls.length - 1" style="margin-right: 5px;" class="action-btn" tabindex="6" (click)="addBlankElement()">

          <i class="material-icons">add_circle</i>

        </div>

      </div>

      <div *ngIf="elements.length > 1" class="action-btn remove-btn" tabindex="7" (click)="removeElement(i)">

        <i class="material-icons">remove_circle</i>

      </div>

    </div>

  </div>

</div>

通过在值更改后检查所有元素来解决：

ngOnInit(){

  this.createForm();

  this.myForm.valueChanges.subscribe((data) => {

    this.validate(this.myForm);

  })

}

validate(group: FormGroup = this.myForm){

  this.elements.controls.forEach((data) => {

    data.updateValueAndValidity();

  })

}

Answer 1

在这种情况下，您必须使用updateValueAndValidity更新验证 -this.myForm.get('name').updateValueAndValidity(); this.myForm.get('description').updateValueAndValidity();然后this.myForm.updateValueAndValidity();