Вызовите валидатор и верните значение valid / invalid как true / false из пользовательской директивы focusout: Angular 5 - PullRequest
Новая
       22

Вызовите валидатор и верните значение valid / invalid как true / false из пользовательской директивы focusout: Angular 5

0 голосов
/ 01 июня 2018

Я пытаюсь проверить одно поле ввода, что значение уже существует или отсутствует в базе данных в angular 5. Я создал один пользовательский валидатор и обернул его в директиву, чтобы я мог использовать его в своем DOM.Nowон работает, пока проверка срабатывает при каждом нажатии клавиши, но я изменил его на методе focusout. Но на focusout я не могу вернуть asyncInvalid = true / false или valid = true / false для моего поля.Как я могу этого достичь.Я делюсь своим кодом, который я уже собрал. 

import {
    ReactiveFormsModule,
    NG_VALIDATORS,
    FormsModule,
    FormGroup,
    FormControl,
    ValidatorFn,
    Validator
} from '@angular/forms';
import {
    Directive,
    forwardRef,
    Input,
    HostListener,
    Injectable,
    OnInit
} from '@angular/core';


@Directive({
    selector: '[checkAlreadyExist]',
    providers: [
        {
            provide: NG_VALIDATORS,
            useExisting: CheckAlreadyExist,
            multi: true
        }
    ]
})


export class CheckAlreadyExist implements Validator {

    validator: ValidatorFn;
    paramToBeResolved: any;
    @Input() set eventListener(val) {
        val.subscribe((param: any) => {
            this.paramToBeResolved = param
        });
    }
    constructor() {
        this.validator = this.checkAlreadyExist();
    }
    validate(c: FormControl) {
        return null
    }

    @HostListener('focusout', ['$event.target'])
    onFocusout(c: FormControl) {
        return this.validator(c);
    }

    checkAlreadyExist(): ValidatorFn {
        return (c: FormControl) => {
            let isValid = /^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/.test(c.value);

            if (isValid) {
                return null;
            } else {
                console.log(isValid)
                return {
                    checkAlreadyExist: {
                        valid: true
                    }
                };
            }
        }
    }
}

Я также пытался использовать asyncvalidator.Основная проблема 

return
{
    checkAlreadyExist: {
        valid: true
    }
};

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

ps Я могу видеть журнал, если форма недопустима при фокусировке (console.log(isValid))

Заранее спасибо за помощь.

...