为什么我的验证器函数用于验证 angular 5 中未调用的格式数组？

Question

您好，我遇到了验证器的问题，因为它没有被调用。

目前我有一个 Angular 5 组件，其中定义了 formgroup。 formgroup 有一个表单数组元素。 formgroup 数组中的每个元素都是 FormGroup 类型。我写了一个名为duplicateClientNameValidator的validator。然而，当我编辑表单时，validator 没有被调用。所以以下是我的组件 ts 文件

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


@Component({
  selector: 'pc-account-service-provider-clients',
  templateUrl: './account-service-provider-clients.component.html',
  styleUrls: ['./account-service-provider-clients.component.scss']
})
export class AccountServiceProviderClientsComponent implements OnInit {

  formGroup: FormGroup;
  constructor( private fb: FormBuilder) { }

  ngOnInit() {
    this.formGroup = this.fb.group({
        aliases: this.fb.array([]) 
       },[duplicateClientNameValidator('aliases')]);
  }

  get aliases() {
    return this.formGroup.get('aliases') as FormArray;
  }

  addAlias() {
    const formGroupNew: FormGroup = new FormGroup( {
          id: new FormControl( { value:'', disabled:false}),
          name: new FormControl({ value:'', disabled:false},[Validators.required, Validators.maxLength(50)]),
          companyNumber: new FormControl({ value:'', disabled:false},Validators.maxLength(20))
      }
    );
    this.aliases.push(formGroupNew);
  }

removeItem( index :number){
    this.aliases.removeAt(index);
}

handleSubmit() {}


get cancelLink(): string {
  return  '/dashboard';
}

}

下面是我的validator函数的定义duplicateClientNameValidator

export function duplicateClientNameValidator( serviceProviderClientControlArrayName: string):ValidationErrors | null {

 return (control: FormGroup): ValidationErrors | null => {

         const aliases:FormArray =  <FormArray>control.get(serviceProviderClientControlArrayName);

         for(const formGrp of aliases.controls ) {
          const frmGroup: FormGroup = <FormGroup> formGrp;
          console.log(frmGroup.get('name').value);
         }
      return null;
  };

}

以下是UI的截图。我可以使用 + 图标将新项目添加到 formgroup 中，并且在编辑我期望的所有字段后调用 duplicateClientNameValidator。但是它没有被调用。非常感谢任何帮助

Answer 1

我错误地声明了表单组。一旦我如下更改，它就开始正常工作了。

this.formGroup = this.fb.group({
    aliases: this.fb.array([])
   },{validator: [duplicateClientNameValidator('aliases')]});

为什么我的验证器函数用于验证 angular 5 中未调用的格式数组？

why is my validator function to validate a formarray not called in angular 5?

angular5

angular-validation

angular-reactive-forms