Question

首先，我有一个用于角度验证密码的异步验证器，我正在尝试延迟html中的消息，但它似乎不起作用，我该如何调用它才能正常工作。我通过控制台进行了检查。在函数中登录（控件），它返回预期的结果，但在我用HTML代码调用它的方式上仍然会立即出现。

我将在此处放置示例代码。在这里，我与验证人一起填写表格。

constructor(fb: FormBuilder)
  {
    this.form = fb.group({
      password: ['', Validators.required,this.asyncValidator],
      confirmPassword: ['', Validators.required,this.asyncValidator]
    })
  }

这是验证功能。

asyncValidator(control:FormControl):any{
    return new Promise(
      (resolve) =>{
        setTimeout(() => {
          if((control.password).length < 6 && (control.password).length > 1)
              console.log("true");
          console.log("false");
          resolve(null);
        },2000);
      }
    );
 }

这是我在页面中使用的HTML代码，用于查看延迟的消息（不起作用）。

<div class="alert alert-danger"
  *ngIf="asyncValidator(this.form.controls.password)">Password too short</div>

我该如何使用异步验证器，以使我的HTML消息出现2秒的延迟？

Answer 1

您似乎误解了异步验证器的功能以及如何使用和编写异步验证器。因此，您的实现存在很多问题。这是解决问题的方法。

1。删除constructor中的代码，然后将其移至ngOnInit：

ngOnInit() {
  this.form = this.fb.group({
    password: ['', [Validators.required], [this.asyncValidator.bind(this)]],
    confirmPassword: ['', [Validators.required], [this.asyncValidator.bind(this)]]
  });
}

理论上：constructor应该很瘦according to Misko Hevery

经验丰富的开发人员同意，组件应该便宜且安全地构建。

然后，将async验证器作为第三个参数传递给FormControl

此外，由于async验证程序是将由Angular而不是我们调用的函数，因此我们需要通过在this上调用bind(this)来显式设置asyncValidator的上下文。异步验证器功能。

2。现在，null返回的promise在没有错误的情况下应解析为asyncValidator(control: FormControl): any { return new Promise( (resolve) => { setTimeout(() => { if ((control.value).length < 6 && (control.value).length > 1) resolve(null); else resolve({ shortPassword: true }); }, 2000); } ); }，在发生错误的情况下应成为错误对象：

FormControl

3。创建一个函数，该函数将根据是否触摸asyncValidator并返回错误信息来返回布尔值：

getFormControlError(controlName) {
  const control = this.form.get(controlName);
  return control.touched && control.errors && control.errors.shortPassword;
}

理论上：这是我们将在模板中使用的东西。

4。更新模板以仅在触摸输入字段并显示该错误时显示错误：

<form [formGroup]="form">
  Password: <input type="text" formControlName="password">
  <div class="alert alert-danger"
  *ngIf="getFormControlError('password')">Password too short</div>

  <br><br>

  Confirm Password: <input type="text" formControlName="confirmPassword"> 
  <div class="alert alert-danger"
  *ngIf="getFormControlError('confirmPassword')">Password too short</div>
  <br> 
  <br>
</form>

这是您推荐的Working Sample Stackblitz。

如何使角度异步验证器超时

1 个答案: