3

我为我的模板驱动表单创建了一个异步验证器。

import {Directive, forwardRef} from "@angular/core";
import {NG_ASYNC_VALIDATORS, Validator, AbstractControl, AsyncValidator} from "@angular/forms";
import {Observable} from "rxjs";


@Directive({
  selector: '[asyncValidator][ngModel]',
  providers: [{
    provide: NG_ASYNC_VALIDATORS, useExisting: forwardRef(() => AsyncAgeValidator), multi: true

  }]
})

export class AsyncAgeValidator implements Validator{

  validate(c: AbstractControl): Observable<{[key : number] : any}>{
      return this.validateAgeObservable(c.value);
  }

  validateAgeObservable( age: number ) {
    return new Observable(observer => {

      if( age === 20 ) {
        observer.next(null);
      } else {
        observer.next({asyncInvalid: true});
        console.log('validate');
      }
    });
  }

  }


}

我在我的模板中使用它，如下所示，但我没有从模板中的验证器获得我期望的错误消息。该调用将发送给验证器，但我猜它没有在组件中注册可观察对象。

<md-input-container>
  <input mdInput type="number" name="age" [(ngModel)]="user.age" placeholder="Age" required asyncValidator>
</md-input-container>
4

2 回答 2

4

您的 observable 永远不会完成，因此 Angular 不知道何时更改表单状态。所以记住你的 observable 必须完成。

您可以通过多种方式完成此操作：

1）手动调用complete()观察者的方法：

validateAgeObservable( age: number ) {
  return new Observable(observer => {
    observer.next(age === 20 ? null : {asyncInvalid: true});
    observer.complete();
  });
}

Plunker 示例

2）调用first()方法：

validate(c: AbstractControl): Observable<{[key : number] : any}>{
    return this.validateAgeObservable(c.value).first();
}

validateAgeObservable( age: number ) {
  return new Observable(observer => {
    observer.next(age === 20 ? null : {asyncInvalid: true});
  });
}

Plunker 示例

于 2017-05-18T10:46:04.257 回答
0

添加到 yurzui 的第二个答案：

这有效：

validate(c: AbstractControl): Observable<{[key : number] : any}>{
    return this.validateAgeObservable(c.value).first();
}

这样做：

validate(c: AbstractControl): Observable<{[key : number] : any}>{
    return this.validateAgeObservable(c.value).take(1);
}
于 2018-05-07T16:37:34.710 回答