Пользовательский асинхронный валидатор Angular возвращает {__zone_symbol__state: null, __zone_symbol__value: Array(0)}

Пытаюсь реализовать пользовательские валидаторы. Неасинхронный (cannotContainSpaces) работает нормально. Асинхронный (shouldBeUnique), который, да, на данный момент тривиален, должен возвращать обещание, как я понимаю, которое должен разрешить объект Validator. Это не так. Коллекция ошибок в formControl username показывает это в консоли:

{__zone_symbol__state: null, __zone_symbol__value: Array(0)}

Компонент формы:

import { CustomValidators } from './custom.validators';
import { Component, Input } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'signup-form',
  templateUrl: './signup-form.component.html',
  styleUrls: ['./signup-form.component.css']
})
export class SignupFormComponent {

  form = new FormGroup({
    username: new FormControl('', [ 
       CustomValidators.cannotContainSpaces,
       CustomValidators.shouldBeUnique
      //  Validators.email, 
    ]),
    password: new FormControl('', Validators.required)
  })

  get username() {
    return this.form.get('username');
  }

  keyPressed(){
    console.log(this.username.errors)
  }

}

Метод пользовательского валидатора:

import { AbstractControl, ValidationErrors } from "@angular/forms";

export class CustomValidators {
    static cannotContainSpaces(control: AbstractControl) : ValidationErrors | null {
        if ((<string>control.value).indexOf(' ') >= 0)
            return { cannotContainSpaces: true};
        return null;
    }

    static shouldBeUnique(control: AbstractControl) : Promise<ValidationErrors | null> {
        return new Promise((resolve, reject) => {
            setTimeout(function() {
                if (control.value === 'treve')
                    resolve({shouldBeUnique: true});
                else resolve(null);
            }, 2000);
        });
    }
}

Соответствующий HTML:

<form [formGroup]="form">
    <div class="form-group">
        <label for="username">Username</label>
        <input 
            (keyup) = "keyPressed()" (blur) = "keyPressed()"
            formControlName="username"
            id="username" 
            type="text" 
            class="form-control">
        <div *ngIf="username.touched && username.invalid" class="alert alert-danger">
            <div *ngIf="username.errors.cannotContainSpaces">Username must not contain spaces</div>
            <div *ngIf="username.errors.shouldBeUnique">Sorry, that username has been taken</div>
        </div>
    </div>

person PakiPat    schedule 26.10.2017    source источник


Ответы (1)


Асинхронные валидаторы должны быть установлены в качестве третьего аргумента:

username: ['', [sync validators here], [async validators here]]

поэтому измените следующее:

username: new FormControl('', 
  [ 
   CustomValidators.cannotContainSpaces,
   CustomValidators.shouldBeUnique
  ]),

to:

username: new FormControl('', 
   [CustomValidators.cannotContainSpaces],
   [CustomValidators.shouldBeUnique]
),

ДЕМО: http://plnkr.co/edit/OceHbSl3atPHdcvNRQDs?p=preview

person AJT82    schedule 26.10.2017
comment
Я искал 2 дня, почему мои AsyncValidators не будут работать должным образом, и я нашел это! Асинхронные валидаторы необходимо добавить в качестве отдельного аргумента. Спасибо! - person Catalin; 01.02.2018
comment
@Catalin Рад слышать, что ответ был полезен для вас! :) :) - person AJT82; 01.02.2018