3

Я реализовал валидацию формы по руководству https://auth0.com/blog/angular-2-series-part-5-forms-and-custom-validation/ ...

            <input class="form-control"
                   type="text"
                   name="phone"
                   autocomplete="off"
                   placeholder="(XXX)-XXX-XXXX"
                   mask=""
                   [disabled]="disabled"
                   [(ngModel)]="candidate.phone"
                   ngControl="phone"/>

...

...

static phone(control: Control): ValidationResult {

    let URL_REGEXP = /^\(\d{3}\)-\d{3}-\d{4}$/i;

    if (control.value && (control.value.length <= 5 || !URL_REGEXP.test(control.value))) {

        return {"phone": true};
    }

    return null;
}

...

плюс для данного элемента формы я реализовал директиву маски ввода: http://pastebin.com/wRzHSsVy

Проблема возникает в следующем: при вводе номера телефона сначала срабатывает валидация а потом уже директива маски, таким образом получается что данные которые проверяет валидатор и данные которые форматирует директива маски отличаются, к примеру на валидаторе номер телефона (888)-888-88882 а маска приводит номер к виду (888)-888-8888 но валидатор уже отработал и выдал ошибку до срабатывания маски.

Как можно вызвать валидатор после срабатывания директивы маски ввода?

1 ответ 1

1

HTML:

<input type="text" class="form-control" name="phone" placeholder="Phone" [(ngModel)]="myclass.phone" [pattern]="PHONE_PATTERN" [textMask]="{mask: PHONE_MASK}"/>

ts:

static PHONE_PATTERN = /\(\d{3}\)\-\d{3}\-\d{4}/;
static PHONE_MASK = ['(', /[1-9]/, /\d/, /\d/, ')', '-', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/];

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.