Control Validators should be observable chains

[escardin]

• I'm submitting a ...
• feature request

Current behavior
Validators are callback functions

Expected/desired behavior
Validators should be observables.

• What is the motivation / use case for changing the behavior?

Currently it is very counter intuitive to build debounced async validators (http://plnkr.co/edit/2NuNj1lBj2e6OdUJjFra?p=preview). It would be much cleaner to work with an observable chain that is subscribed once, instead of subscribed for every value change of a control.

It could look like this:

new Control('',validator$=>{
    return validator$.map(valid=>{
        valid.errors.minLen=valid.value.length>5?null,"Length must be at least 5";
        return valid;
    });
});

[pkozlowski-opensource]

If it is implementable this would also solve problem a async and sync validators "competing" over the valid state, see: #8923 as an example.

I very much like how this would make things like debounce combined with async / sync validation rather easy without any corner cases. Once again, if implementable :-)

[dherges]

Ran into a similar issue in a piece of an application ... here's what we came up with:

http://plnkr.co/edit/7VILN7zoDzD7zQpO65lQ?p=preview

Use Case:

    this.form = this.fb.group({
      'password': new FormControl("",
        undefined,
        AsyncObservableValidator.create((observable: Observable<AbstractControl>) => {
          return observable.map(control => control.value)
            .debounceTime(320)
            .distinctUntilChanged()
            .map(value => {
              if (value.length > 3) {
                return;
              } else {
                return { pwinsecure: true };
              }
            })
          })
        )
      }
    )

Implementation observable-valdidator.ts

import { AbstractControl, AsyncValidatorFn } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import { Observer } from 'rxjs/Observer';
import { Subject } from 'rxjs/Subject';
import { Subscription } from 'rxjs/Subscription';

export class AsyncObservableValidator {

  static create(validator: ObservableValidatorFn): AsyncValidatorFn {
    let sourceObs = new Subject<any>(); // <-- XX .. will this subject cause memory issues by leaking subscriptions?!?
    let validatorObs = validator(sourceObs.asObservable());

    return (c: AbstractControl) => { // <-- returns an AsyncValidatorFn to angular forms
      return Observable.create((obs: Observer<any>) => { // <-- creates a result observable that triggers the validator observable when angular forms requests validation
        let subscription = validatorObs.subscribe(
          (next: any) => { // <-- receives the result from the validator observable and emits it thru the result observable
            obs.next(next);
            obs.complete();
            subscription.unsubscribe();
          }
        );
        sourceObs.next(c); // <-- the source observable emits the form control so that the validator observable receives it
      })
      .toPromise(); // <-- converts the validation result from the result observable to a promise and returns it to angular forms
    }
  }
}

/**
 * @params observable ObservableValidatorFn takes an Observable<AbstractControl> that emits when the
 * form control (AbstractControl) should be validated.
 *
 * @return ObservableValidatorFn returns an Observable<any> that emits the validation result.
 */
export interface ObservableValidatorFn {
  (observable: Observable<AbstractControl>): Observable<any>;
}