Angular 6自定义验证,在表单数组中动态创建表单控件

问题描述 投票:0回答:2

有一个简单的动态生成表单

  this.submitForm = this._fb.group({
          'tournamentid': new FormControl(null),
          'participants': this._fb.array([  ],   [CustomValidators.uniqueBy('nric'), this.averageAgeValidator(45)])
        });

添加玩家事件将动态添加以下代码

     addPlayers(): FormGroup {
            return this._fb.group({
                 'nric': new FormControl(null, [Validators.required]),
                  'nricname': new FormControl(null, Validators.required),
                  'dob': new FormControl(null, Validators.required),

            });
          }

我想验证所有动态添加的表单字段的平均DOB是否为45年。有计算年龄的功能,我有一个日期组件来获取日期。需要知道如何遍历formarrays并获得dob字段并获得它的平均值。

当所有添加的玩家的平均年龄为45岁时,我的averageAgeValidator函数应如何工作以标记错误。请建议

angular typescript angular6
2个回答
4
投票

我在反应形式中添加了自定义验证器,它对我有用。

表单定义,其中partnerEmailArray是一组电子邮件,partnerEmail是具有自定义验证的字段。

createPartnerForm() {
this.createPartnerForm = this.partnerFormBuilder.group({
  partnerName: new FormControl({}, Validators.required),
  partnerEmailArray: this.partnerFormBuilder.array([this.partnerFormBuilder.group({
    partnerEmail: [{}, [Validators.required, this.emailValidator(this.re)]]
  })])
})

验证器功能

emailValidator(emailRe: RegExp): ValidatorFn {
return (control: AbstractControl): { [key: string]: any } | null => {
  const email = emailRe.test(control.value);
  return email ? null : { 'CustomEmail': { value: control.value } };
};

}

获取表单和表单数组

 get Partnerform() {
return this.createPartnerForm.controls;  }
get PartnerformEmail() {
return this.createPartnerForm.get('partnerEmailArray') as FormArray;}

在HTML中,

<label>Email address</label>
        <div class="email" formArrayName="partnerEmailArray">
          <div *ngFor="let item of PartnerformEmail.controls; let $index=index" [formGroupName]="$index">
            <input type="text" class="form-text form-control" id="email"
                   formControlName="partnerEmail">                
            <div *ngIf="Partnerform.partnerEmailArray.controls[$index].controls.partnerEmail.touched && Partnerform.partnerEmailArray.controls[$index].controls.partnerEmail.errors">
              <div *ngIf="Partnerform.partnerEmailArray.controls[$index].controls.partnerEmail.errors.required" class="validationMessage">
                Partner Email is required.
              </div>
              <div *ngIf="!Partnerform.partnerEmailArray.controls[$index].controls.partnerEmail.errors.required && Partnerform.partnerEmailArray.controls[$index].controls.partnerEmail.errors.CustomEmail" class="validationMessage">
                Partner Email is invalid.
              </div>
            </div>
          </div>

        </div>

0
投票

你试过自定义验证器吗?

'dob': new FormControl(null, [Validators.required,this.customValidator]),

customValidatorForUrl (control: AbstractControl) {
  // you can acccess value using "control.value"
  // do the calculation and return true\false as per your calculation
  return true/false;
}
© www.soinside.com 2019 - 2024. All rights reserved.