0

嗨，我正在使用 Angular (4)，我有一个自定义验证器并通过ngIF

inValid(fieldName: string) {
  return (
    this.form.get(fieldName).hasError('pattern') && 
    this.form.get(fieldName).dirty &&
    !this.required(fieldName)
  );
}

我想延迟return响应，以便用户有时间在显示错误（如果有）消息之前输入几个字符。name是相关字段的值。即名字

HTML

<div *ngIf="inValid(fieldName)" class="error-message">
  Invalid
</div>

理想情况下，我不想使用https://twitter.com/signup的电子邮件字段中使用的内容.touched

提前致谢。

4

2 回答 2

0

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

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

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>

所以现在有了这个验证器，随着超时，错误消息会延迟显示。

于 2017-08-01T12:12:25.363 回答
0

您可以在表单控件的 valueChanges observable 上使用 rxjs 运算符 debounceTime 延迟响应：

  1. 导入'rxjs/add/operator/debounceTime'；在组件中。

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

this.form.get("name").valueChanges.debounceTime(1000) .subscribe(data => this.error = this.inValid(data));

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

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

于 2017-07-29T04:34:57.990 回答