响应式/模型驱动的表单 - 自定义验证响应式表单

让我们假设使用相同的登录表单，但现在我们还要测试我们的密码在其中某处有感叹号。

app/login-form.component.ts

一个简单的函数接受实例，并返回null如果一切都很好。 如果测试失败，它返回一个具有任意命名属性的对象。 属性名称将用于.hasError()测试。

app/login-form.component.ts

<!-- ... -->
<div [hidden]="!password.hasError('needsExclamation')">
  Your password must have an exclamation mark!
</div>
<!-- ... -->

有一个自定义验证器来检查感叹号可能是有帮助的，但如果你需要检查一些其他形式的标点符号怎么办？ 你可能需要一遍又一遍地写做相同的事情。

考虑前面的例子Validators.minLength(5)。 如果验证器只是一个函数，它们如何允许一个参数来控制长度？ 简单，真的。 这不是Angular或TypeScript的一个戏法，它是简单的JavaScript闭包。

假设你有一个函数，它接受一个“最小”参数并返回另一个函数。 从内部定义和返回的函数成为验证器。 闭包引用允许您记住最终调用验证器时的最小值。

让我们将这种思路应用到PunctuationValidator。

function hasPunctuation(punctuation: string, errorType: string) {
  return function(input: FormControl) {
    return input.value.indexOf(punctuation) >= 0 ?
        null :
  };
}
// ...
this.password = new FormControl('', [
  Validators.required,
  hasPunctuation('&', 'ampersandRequired')
]);

app/login-form.component.html

View Example

使用其他输入验证输入

记住前面提到的：输入可以通过.root访问他们的父上下文。 因此，复杂的验证可以通过.root在表单上获取。

function duplicatePassword(input: FormControl) {
  }
  const exactMatch = input.root.controls.password === input.value;
  return exactMatch ? null : { mismatchedPassword: true };
}
// ...
this.duplicatePassword = new FormControl('', [
  Validators.required,
  duplicatePassword
]);

View Example