Straightforward custom validation in angular2

Question

I've created this validation function:

private customValidateField(c: FormControl): any {
    return c.value[0] === 'a' ? null : { notValid: true };
}

So, on my reactive form:

constructor(private fb: FormBuilder)
{
  this.form = this.fb.group({
    field: ['', Validators.required, this.customValidateField],
    ...
  }
}

When I'm writing any character into this field I'm getting this error:

Error: Expected validator to return Promise or Observable.

Any ideas?

Ján Halaša · Accepted Answer · 2017-04-04 08:09:10Z

11

The third item in the "field" array is an asynchronous validator (or an array of them). So to specify multiple synchronous validators, you need to:

Pass them as an array

this.fb.group({
  'formControlName': [this.hero.name, [
      Validators.required,
      Validators.minLength(4)
  ]]
});

or combine them (as Jordi wrote) using

Validators.compose(...)

FormBuilder API doc doesn't discuss the parameters in detail, but since it's just a shortcut for creating FormGroup with FormControl-s, you can take a look at the FormControl constructor: https://angular.io/docs/ts/latest/api/forms/index/FormControl-class.html

answered Apr 4, 2017 at 8:09

Ján Halaša

8,4961 gold badge40 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jordi · Accepted Answer · 2017-04-04 07:37:44Z

5

I've just used Validators.compose:

this.form = this.fb.group({
  field: ['', Validators.compose([Validators.required, this.validateCardNumber])],
  ...
}

answered Apr 4, 2017 at 7:37

Jordi

23.7k50 gold badges195 silver badges423 bronze badges