* ng如果在应该显示div之前显示div,

时间:2018-10-06 14:00:56

标签: asynchronous angular6 angular4-forms

以简单的形式,我添加了一个输入和一个用于错误的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);    
    });
}

这是组件。

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”时,两秒钟后,将显示具有相应错误的div。

当我在字段中键入'asd'时,有错误的div将立即显示,并且没有任何消息。我只是得到一个红色的div,没有任何文字。

他和我的代码相同,但是他使用的是4号角,而我使用的是6号角。

此代码的目的是模拟和解释异步调用。这就是为什么此代码在实际项目中不会引起任何注意的原因。只是模拟而已。

在我的情况下,A4和A6之间是否有区别? 为什么当我更改焦点而不是等待2秒后,我的div错误会正确显示? 我如何得到他得到的结果?

我希望我提供了足够的信息,这对angular来说是全新的。

0 个答案:

没有答案