为什么我的验证器功能来验证未在angular 5中调用的formarray？

Question

嗨，我的验证程序遇到问题，因为它没有被调用。

当前，我有一个Angular 5组件，其中定义了一个formgroup。 formgroup有一个表单数组元素。 formgroup数组中的每个元素都是FormGroup类型。我写了一个名为validator的{​​{1}}。但是，当我编辑表单duplicateClientNameValidator时不会被调用。所以下面是我的ts文件

validator

以下是我的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

以下是UI的快照。我可以使用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; }; } 图标将新项目添加到+中，在编辑完所有字段后，我希望调用formgroup。但是它没有被调用。非常感谢您的帮助

Answer 1

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

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