angular2 formBuilder组异步验证

时间：2017-05-23 12:30:08

标签： angular validation angular2-forms angular2-formbuilder

我试图实现异步验证器但没有成功......

我的组件创建一个表单：

this.personForm = this._frmBldr.group({
  lastname:  [ '', Validators.compose([Validators.required, Validators.minLength(2) ]) ],
  firstname: [ '', Validators.compose([Validators.required, Validators.minLength(2) ]) ],
  birthdate: [ '', Validators.compose([ Validators.required, DateValidators.checkIsNotInTheFuture ]) ],
  driverLicenceDate: [ '', Validators.compose([ Validators.required, DateValidators.checkIsNotInTheFuture ]), this.asyncValidationLicenceDate.bind(this) ],
}, {
  asyncValidator: this.validateBusiness.bind(this),
  validator: this.validateDriverLicenseOlderThanBirthdate,
});

我的验证方法

validateBusiness(group: FormGroup) {
  console.log('validateBusiness')
  return this._frmService
    .validateForm(group.value)
    .map((validationResponse: IValidationResponse) => {
      if (validationResponse) {
        validationResponse.validations.forEach( (validationError: IValidationErrorDescription) => {
                        let errorMsg = validationError.display;
                        let errorCode = validationError.code;
                        validationError.fields.forEach( (fieldName: string) => {
                            console.log(fieldName);
                            let control = this.personForm.controls[fieldName];
                            let existingErrors = control.errors || {};
                            existingErrors[errorCode] = errorMsg;
                            control.setErrors(existingErrors);
                        });
                    });
                }
            });
    }

除了v​​alidateBusiness方法（在extra.asyncValidator的{​​{1}} param中）之外，所有的验证都被称为成功的，但从未被调用过......有人可以告诉我我做错了什么吗？

的Tx

1 个答案:

答案 0 :(得分：8)

TL; DR：通过分析您的用例，您可能需要解决方案2

问题

问题在于如何定义和使用异步验证器。

异步验证器定义为：

export interface AsyncValidatorFn {
    (c: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null>;
}

这是因为FormBuilder.group()实际上正在调用FormGroup构造函数：

constructor(controls: {
    [key: string]: AbstractControl;
}, validator?: ValidatorFn | null, asyncValidator?: AsyncValidatorFn | null);

因此，异步验证器函数将接收AbstractControl实例，在这种情况下，它是FormGroup实例，因为验证器位于FormGroup级别。验证程序需要返回Promise或Observable ValidationErrors，如果没有验证错误，则返回null。

ValidationErrors被定义为字符串键和值的映射（您喜欢的任何内容）。键实际上是定义验证错误类型的字符串（例如：＆＃34; required＆＃34;）。

export declare type ValidationErrors = {
    [key: string]: any;
};

AbstractControl.setErrors()? - 在您的示例中，您定义的函数不返回任何内容，但实际上直接更改了控件错误。调用setErrors仅适用于手动调用验证的情况，因此只能手动设置错误。相反，在您的示例中，方法是混合的，FormControl附加了将自动运行的验证函数，FormGroup异步验证函数也会自动运行，尝试设置错误，从而手动有效。这不起作用。

您需要采用以下两种方法之一：

  1. 附加将自动运行的验证功能，从而设置错误和有效性。不要尝试在附加了验证功能的控件上手动设置任何内容。
  2. 手动设置错误，从而无需将任何验证功能附加到受影响的AbstractControl实例。

    3. 如果您想保持一切清洁，那么您可以实施单独的验证功能。 FormControl验证只会处理一个控件。 FormGroup验证会将表单组的多个方面视为一个整体。

    如果您想使用验证服务，实际验证整个表单，就像您一样，然后将每个错误委派给每个适当的控件验证器，那么您可以使用解决方案2 。这有点困难。

    但如果你可以使用FormGroup级别的验证器使用验证服务，那么可以使用解决方案1 ​​来实现。

    解决方案1 ​​ - 在FormGroup级别创建错误

    让我们假设我们要输入名字和姓氏，但第一个名称需要与姓氏不同。并假设此计算需要1秒。

    <强>模板 

    <form [formGroup]="personForm">
  <div>
    <input type="text" name="firstName" formControlName="firstName" placeholder="First Name" />
  </div>
  <div>
    <input type="text" name="lastName" formControlName="lastName" placeholder="Last Name" />
  </div>

  <p style="color: red" *ngIf="personForm.errors?.sameValue">First name and last name should not be the same.</p>

  <button type="submit">Submit</button>
</form>

    <强>组件

    以下validateBusiness验证功能将返回Promise：

    import { Component, OnInit } from '@angular/core';
import {AbstractControl, FormBuilder, FormGroup, ValidationErrors, Validators} from "@angular/forms";
import {Observable} from "rxjs/Observable";
import "rxjs/add/operator/delay";
import "rxjs/add/operator/map";
import "rxjs/add/observable/from";

@Component({
  selector: 'app-async-validation',
  templateUrl: './async-validation.component.html',
  styleUrls: ['./async-validation.component.css']
})
export class AsyncValidationComponent implements OnInit {

  personForm: FormGroup;

  constructor(private _formBuilder: FormBuilder) { }

  ngOnInit() {

    this.personForm = this._formBuilder.group({
      firstName:  [ '', Validators.required ],
      lastName: [ '', Validators.required ],
    }, {
      asyncValidator: this.validateBusiness.bind(this)
    });
  }

  validateBusiness(control: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> {

    return new Promise((resolve, reject) => {
      setTimeout(() => {
          if (control.value.firstName !== control.value.lastName) {
            resolve(null);
          }
          else {
            resolve({sameValue: 'ERROR...'});
          }
        },
        1000);
    });
  }
}

    或者，验证函数可以返回Observable：

      validateBusiness(control: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> {

    return Observable
      .from([control.value.firstName !== control.value.lastName])
      .map(valid => valid ? null : {sameValue: 'ERROR...'})
      .delay(1000);
  }

    解决方案2 - 为多个控件协调验证错误

    另一种选择是在表单更改时手动验证，然后将结果传递给可由以后FormGroup和FormControl异步验证器使用的observable。

    我创建了一个POC here。

    <强> IValidationResponse

    用于验证表单数据的验证服务的响应。

    import {IValidationErrorDescription} from "./IValidationErrorDescription";

export interface IValidationResponse {
  validations: IValidationErrorDescription[];
}

    <强> IValidationErrorDescription

    验证响应错误说明。

    export interface IValidationErrorDescription {
  display: string;
  code: string;
  fields: string[];
}

    <强> BusinessValidationService

    验证服务，用于实现验证表单数据的业务。

    import { Injectable } from '@angular/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/from';
import 'rxjs/add/operator/map';
import {IValidationResponse} from "../model/IValidationResponse";

@Injectable()
export class BusinessValidationService {

  public validateForm(value: any): Observable<IValidationResponse> {
    return Observable
      .from([value.firstName !== value.lastName])
      .map(valid => valid ?
        {validations: []}
        :
        {
          validations: [
            {
              code: 'sameValue',
              display: 'First name and last name are the same',
              fields: ['firstName', 'lastName']
            }
          ]
        }
      )
      .delay(500);
  }
}

    <强> FormValidationService

    验证服务，用于为FormGroup和FormControl构建异步验证器，并订阅表单数据中的更改，以便将验证委托给验证回调（例如：BusinessValidationService）。

    它提供以下内容：

    • validateFormOnChange() - 当表单更改时，它会调用验证回调validateFormCallback，并在使用FormGroup触发FormControl和control.validateFormGroup()的验证时。< / LI>
    • createGroupAsyncValidator() - 为FormGroup
      • 创建异步验证器
    • createControlAsyncValidator() - 为FormControl
      • 创建异步验证器

    代码：

    import { Injectable } from '@angular/core';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/from';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/first';
import 'rxjs/add/operator/share';
import 'rxjs/add/operator/debounceTime';
import {AbstractControl, AsyncValidatorFn, FormGroup} from '@angular/forms';
import {ReplaySubject} from 'rxjs/ReplaySubject';
import {IValidationResponse} from "../model/IValidationResponse";

@Injectable()
export class FormValidationService {

  private _subject$ = new ReplaySubject<IValidationResponse>(1);
  private _validationResponse$ = this._subject$.debounceTime(100).share();
  private _oldValue = null;

  constructor() {
    this._subject$.subscribe();
  }

  public get onValidate(): Observable<IValidationResponse> {
    return this._subject$.map(response => response);
  }

  public validateFormOnChange(group: FormGroup, validateFormCallback: (value: any) => Observable<IValidationResponse>) {
    group.valueChanges.subscribe(value => {
      const isChanged = this.isChanged(value, this._oldValue);
      this._oldValue = value;

      if (!isChanged) {
        return;
      }

      this._subject$.next({validations: []});
      this.validateFormGroup(group);

      validateFormCallback(value).subscribe(validationRes => {
        this._subject$.next(validationRes);
        this.validateFormGroup(group);
      });
    });
  }

  private isChanged(newValue, oldValue): boolean {
    if (!newValue) {
      return true;
    }

    return !!Object.keys(newValue).find(key => !oldValue || newValue[key] !== oldValue[key]);
  }

  private validateFormGroup(group: FormGroup) {
    group.updateValueAndValidity({ emitEvent: true, onlySelf: false });

    Object.keys(group.controls).forEach(controlName => {
      group.controls[controlName].updateValueAndValidity({ emitEvent: true, onlySelf: false });
    });
  }

  public createControlAsyncValidator(fieldName: string): AsyncValidatorFn {
    return (control: AbstractControl) => {
      return this._validationResponse$
        .switchMap(validationRes => {
          const errors = validationRes.validations
            .filter(validation => validation.fields.indexOf(fieldName) >= 0)
            .reduce((errorMap, validation) => {
              errorMap[validation.code] = validation.display;
              return errorMap;
            }, {});

          return Observable.from([errors]);
        })
        .first();
    };
  }

  public createGroupAsyncValidator(): AsyncValidatorFn {
    return (control: AbstractControl) => {

      return this._validationResponse$
        .switchMap(validationRes => {
          const errors = validationRes.validations
            .reduce((errorMap, validation) => {
              errorMap[validation.code] = validation.display;
              return errorMap;
            }, {});

          return Observable.from([errors]);
        })
        .first();
    };
  }
}

    AsyncFormValidateComponent模板

    定义firstName lastName内的FormControl和personForm FormGroup。对于此示例，条件是firstName和lastName应该不同。

    <form [formGroup]="personForm">
  <div>
    <label for="firstName">First name:</label>

    <input type="text"
           id="firstName"
           name="firstName"
           formControlName="firstName"
           placeholder="First Name" />

    <span *ngIf="personForm.controls['firstName'].errors?.sameValue">Same as last name</span>
  </div>
  <div>
    <label for="lastName">Last name:</label>

    <input type="text"
           id="lastName"
           name="lastName"
           formControlName="lastName"
           placeholder="Last Name" />

    <span *ngIf="personForm.controls['lastName'].errors?.sameValue">Same as first name</span>
  </div>

  <p style="color: red" *ngIf="personForm.errors?.sameValue">First name and last name should not be the same.</p>

  <button type="submit">Submit</button>
</form>

    <强> AsyncValidateFormComponent

    该组件用作使用FrmValidationService实现验证的示例。由于providers: [FormValidationService]，此组件具有自己的此服务实例。由于Angular分层注入器功能，一个注入器将与此组件关联，并且将为AsyncValidateFormComponent的每个实例创建一个此服务实例。因此能够在每个组件实例的基础上跟踪此服务中的验证状态。

    import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import 'rxjs/add/operator/delay';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/from';
import {FormValidationService} from "../services/form-validation.service";
import {BusinessValidationService} from "../services/business-validation.service";

@Component({
  selector: 'app-async-validate-form',
  templateUrl: './async-validate-form.component.html',
  styleUrls: ['./async-validate-form.component.css'],
  providers: [FormValidationService]
})
export class AsyncValidateFormComponent implements OnInit {

  personForm: FormGroup;

  constructor(private _formBuilder: FormBuilder,
              private _formValidationService: FormValidationService,
              private _businessValidationService: BusinessValidationService) {
  }

  ngOnInit() {
    this.personForm = this._formBuilder.group({
      firstName: ['', Validators.required, this._formValidationService.createControlAsyncValidator('firstName')],
      lastName: ['', Validators.required, this._formValidationService.createControlAsyncValidator('lastName')],
    }, {
      asyncValidator: this._formValidationService.createGroupAsyncValidator()
    });

    this._formValidationService.validateFormOnChange(this.personForm, value => this._businessValidationService.validateForm(value));
  }
}

    <强>的AppModule

    它使用ReactiveFormsModule来处理FormBuilder，FormGroup和FormControl。还提供BusinessValidationService。

    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { AsyncValidateFormComponent } from './async-validate-form/async-validate-form.component';
import {BusinessValidationService} from "./services/business-validation.service";

@NgModule({
  declarations: [
    AppComponent,
    AsyncValidateFormComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule
  ],
  providers: [
    BusinessValidationService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
相关问题
最新问题