Как реализовать пользовательский асинхронный валидатор в Angular2/4/5

1. Поддерживается ли еще поддержка Angular? см. этот открытый вопрос

2. Если это так, то что не так в коде ниже

export class someClass{

    myForm:ControlGroup;

    constructor(public http:Http, public formBuilder:FormBuilder)
       this.myForm = formBuilder.group({
            ImageId: ["", Validators.required, this.asynValidator]
    });

    asyncValidator(control: Control): {[key: string]: any} {

        return new Promise (resolve => {

          let headers = new Headers();
          headers.append('Content-Type', 'application/json');

          this.http.get('http://localhost/ImageIdValidate?id='+ control.value, {headers:headers})
                .map(res => res.json())
                .subscribe(data => {
                    console.log(data);
                    if(data != null) {
                        resolve({"duplicate": true})
                    }
                    else resolve(null);      
                })
            });
        });
      }
    }

Он даже не делает запрос на сервер.

Ответ 1

Вам необходимо привязать свой метод к самому экземпляру компонента, как описано ниже:

this.myForm = formBuilder.group({
            ImageId: ["",    
               Validators.required, 
               this.asynValidator.bind(this)]
    });

В противном случае вы не сможете использовать свойство http для выполнения вашего запроса.

Эта статья также может дать вам некоторые подсказки об асинхронной проверке формы (см. раздел "Асинхронная проверка" ):

http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/

Ответ 2

как и для более поздних версий Angular, но pre version 5.0.0 вы добавили бы валидатор async в качестве третьего аргумента для вашего formcontrol:

myControl: ['', [Validators.required], [this.asyncValidator.bind(this)]]

Начиная с версии 5.0.0 вы можете теперь пометить валидаторы следующим образом:

myControl: ['', {validators: [Validators.required], 
                 asyncValidators:[this.asyncValidator.bind(this)]}]

Ответ 3

Привет, ребята, спасибо за решение. Однако он не работал у меня из коробки.

проблема заключалась в том, что валидатор async должен был быть следующим параметром как частью валидаторов. поэтому то, что сработало для меня, было

this.myForm = formBuilder.group({
        ImageId: ["",    
           [Validators.required], 
           [this.asynValidator.bind(this)]]
});

и тадаа!! головная боль исчезла. надеюсь, что это поможет кому-то.