Question

您好我正在使用Angular（4）并且我有一个自定义验证器并通过console.log(req)显示它

ngIF

我想延迟inValid(fieldName: string) { return ( this.form.get(fieldName).hasError('pattern') && this.form.get(fieldName).dirty && !this.required(fieldName) ); }响应，以便用户在显示错误（如果有）消息之前有时间键入几个字符。 return是相关字段的值。即firstName

HTML

name

理想情况类似https://twitter.com/signup电子邮件字段中使用的内容我不想使用<div *ngIf="inValid(fieldName)" class="error-message"> Invalid </div>

提前致谢。

Answer 1

你可以在表单控件的valueChanges observable上使用rxjs operator debounceTime来延迟响应：

import＆＃39; rxjs / add / operator / debounceTime＆＃39 ;;在组件中。

2.在订阅中，您可以设置一个包含inValid函数结果的组件级变量，在html中需要将此变量绑定到div以切换错误消息。

this.form.get（＆＃34;名称＆＃34）。valueChanges.debounceTime（1000） .subscribe（data =＆gt; this.error = this.inValid（data））;

<div *ngIf="isError" class="error-message"> Invalid </div>

注意： - 您还可以在表单元素级别订阅valueChanges，以便为所有表单字段编写通用解决方案。有关详细信息，请参阅角度文档中的onValueChanged函数。

Answer 2

我建议您使用异步验证器。这是一个例子。

需要在任何同步验证器之后声明异步验证器：

this.myForm = this.fb.group({
  name: ['', [], this.asyncValidator]
});

以下是您的异步验证器的样子，这里我只设置了两个自定义验证器，一个检查字段不为空，另一个检查该字段至少有4个字符：

asyncValidator(control: FormControl): Promise<any> | Observable<any> {
  const promise = new Promise<any>((resolve, reject) => {
    setTimeout(() => {
      // empty
      if (control.value === '') {
        resolve({'req': true});
      }
      // length
      else if(control.value.length < 4) {
        resolve({'minl':true})
      }
      else {
        // valid
        resolve(null);
      }
    }, 1000);
  });
  return promise;
}

然后你的模板看起来像这样：

<div *ngIf="!myForm.get('name').pristine">
  <small *ngIf="myForm.hasError('req', 'name')"> Required </small>
  <small *ngIf="myForm.hasError('minl', 'name')"> Min 4 chars </small>
</div>

现在使用此验证器，超时时，错误消息会显示延迟。

将超时设置为Angular Reactive From Validation消息ngIF

2 个答案: