Класс, указывающий на наличие асинхронной проверки

Question

Прямой вопрос

Есть какой-нибудь способ, которым я могу сказать, происходит ли некоторая асинхронная проверка на некотором контроле?

Подробный вопрос

При работе с формами в Angular вы можете обнаружить, что в зависимости от состояния некоторого элемента управления у него будут или нет некоторые классы ng- *.

Например, если элемент управления проверяет правильностьадрес электронной почты и такой адрес не соответствуют некоторому регулярному выражению, класс ng-invalid будет добавлен в элемент управления.

Теперь вы можете выполнить Async Validation , но пока проверка выполняется,в элементе управления нет ошибок, и поэтому вы не можете написать код, подобный следующему:

<button [class.disabled]="email.errors">

Если вы напишите код, как указано выше, кнопка будет активна до тех пор, покаАсинхронный валидатор отвечает с некоторой ошибкой.Если ошибки нет, то это счастливый случай, но если обнаружена какая-то ошибка, то поведение таково, что кнопка будет включена на некоторое время, а это не то, чего я хочу!

Answer 1

Есть какой-то способ узнать, выполняется ли какая-либо асинхронная проверка на каком-либо элементе управления?

Да, согласно Angular docs , модели с асинхронностьюпроверка может находиться в состоянии ожидания :

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

Таким образом, вы можете изменить класс .ng-pending, чтобы применить какой-то особый стиль ко всем ожидающим элементам, или выможет получить доступ к свойству model.pending, чтобы иметь полную власть.Например:

<button [class.disabled]="model.pending">

Answer 2

Что ж, благодаря @Brandom я придумала решение для моего варианта использования.

В тот момент, когда я написал это, я не знал, что такой класс уже существует

В качестве примечания: я бы предпочел, чтобы, если элемент управления формыпроходит проверку из-за асинхронного валидатора, который предоставляет класс ng, скажем, ng-validating .

Что я сделал.

Я добавил свойствок родительскому компоненту под названием валидация и пара методов, validationStarted и validationEnded .

@Component{/* Some options here */}
export class MyComponent{
    // ...
    validating: bool = false;
    public validationStarted() {validating = true;}
    public validationEnded() {validating = false;}
}

В пользовательском валидаторе (который являетсяреализовано как директива) Я также добавил два выходных свойства: начальная проверка и окончательная проверка .Поэтому мой пользовательский валидатор выглядит примерно так:

@Directive{ /*Some options here*/ }
export class DirectiveName {

    @Output startingValidation: EventEmitter;
    @Output finishingValidation: EventEmitter;

    // Async validator must return a Promise or an Observer
    validate (control: AbstractControl): Promise<ValidationErrors|null> | Observer<ValidationErrors|null>
    {
        self.startingValidation.emit()
        return new Observer(observer => {
            next => {},
            error => {},
            complete => {
                self.finishingValidation.emit();                
            }
        });
    }
}

И проверяемый элемент управления:

<input (startingValidation)="validationStarted()"  (finishingValidation)="validationEnded()">

Теперь я могу:

<button [class.disabled]="validating">

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

Обновление

Как указывает @ Cristian_Traìna, действительно есть класс: ng-pending .И был запрошен в 2016 году: https://github.com/angular/angular/issues/10336