动态添加时 validators.pattern 中的角度问题

Question

我对使用响应式形式的 validators.pattern 有疑问。如果我在 formbuilder 组中添加验证，它工作得很好，也就是说当不满足正则表达式模式时该字段无效。 但是当我在提交时动态添加验证时，如果我输入了错误模式的值，则表示输入有效，而当我添加正确模式的值时，则表示无效。 o_O

1. 表单生成器中的验证器

  form = this.formBuilder.group({
    field: [null, Validators.pattern('^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$')]
  });

1. 动态添加验证器：

this.form.controls[field].setValidators([Validators.pattern('/^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/')]);
this.form.controls[field].updateValueAndValidity();

我发现的唯一区别是因为我需要在第二种方法中添加 /。如果我删除 /，验证器将不起作用。

我也试过this.form.get('field').setValidators...，但行为是一样的。

你们知道我做错了什么吗？

谢谢！

Answer 1

它只是失败了。 请看一下：https://github.com/angular/angular/blob/2ab8e88924532ecd8a3459b8cb11b4ce9b7f847b/packages/forms/src/validators.ts#L349-L406。

如果你传入一个字符串，Angular 会在你的字符串前面加上 ^ 和 $。你的字符串只是失败了。 https://github.com/angular/angular/blob/2ab8e88924532ecd8a3459b8cb11b4ce9b7f847b/packages/forms/src/validators.ts#L387 和 https://github.com/angular/angular/blob/2ab8e88924532ecd8a3459b8cb11b4ce9b7f847b/packages/forms/src/validators.ts#L391