* ngЕсли показывает div, прежде чем он должен - PullRequest
Новая
       17

* ngЕсли показывает div, прежде чем он должен

0 голосов
/ 06 октября 2018

В простой форме я добавил ввод и div для ошибки.Например, 

        <input 
        formControlName="username"
        id="username" 
        type="text" 
        class="form-control">
        <div *ngIf="username.touched && username.invalid" class="alert alert-danger">
            <div *ngIf="username.errors.required" >Username is required</div>
            <div *ngIf="username.errors.shouldBeUnique">Username is not unique</div>
        </div>

Я также создал класс, который содержит верификатор shouldBeUnique, например: 

static shouldBeUnique(control: AbstractControl): Promise<ValidationErrors | null> 
{
    return new Promise((resolve, reject) => {
        console.log('START');
        setTimeout(() => {
            console.log(control);
             if((control.value as string) == 'asd')
                 resolve({ shouldBeUnique: true});
             else 
                resolve(null);
        }, 2000);    
    });
}

Здесь component.ts 

export class SignupFormComponent {
  form = new FormGroup({
    username: new FormControl('',[
       Validators.required,
       UsernameValidators.shouldBeUnique
    ]),
    password: new FormControl('', Validators.required),
  });

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

Дело в том, что в уроке, который я смотрю, когда учитель вводит «asd» в поле ввода имени пользователя, через 2 секунды отображается div с соответствующей ошибкой.

Когда я набираю 'asd' в моем поле, div с ошибкой отображается сразу, без сообщения.Я просто получаю красный div без текста.

Его и мой код совпадают, НО он использует угловой 4, а я использую угловой 6.

Цель этогоКод для симуляции и объяснения асинхронных вызовов.Вот почему этот код не создает сцен в реальном проекте.Это просто симуляция.

Есть ли разница между A4 и A6, которая имеет значение в моем случае?Почему мой div для ошибок отображается правильно, когда я меняю фокус, а не жду 2 с?Как я могу получить результат, который он получает?

Я надеюсь, что предоставил достаточно информации, я совершенно новый для angular.

...