Angular2 中的跨字段验证

问题描述

我正在构建一个 Angular2 客户端应用程序.我目前正在研究成员资格组件并将客户端组件与 MVC6 vNext Identity v3 集成.我编写了自定义的 Angular2 密码验证器，如下所示:

I'm building an Angular2 client side application. I'm currently working on the membership components and integrating client side components with MVC6 vNext Identity v3. I have written custom Angular2 password validators as follows:

needsCapitalLetter(ctrl: Control): {[s: string]: boolean} {
    if(!ctrl.value.match(/[A-Z]/))
        return {'needsCapitalLetter': true}

    return null;
}

needsLowerLetter(ctrl: Control): {[s: string]: boolean} {
    if(!ctrl.value.match(/[a-z]/))
        return {'needsLowerLetter': true}

    return null;
}

needsNumber(ctrl: Control): {[s: string]: boolean} {
    if(!ctrl.value.match(/d/))
        return {'needsNumber': true}

    return null;
}

needsSpecialCharacter(ctrl: Control): {[s: string]: boolean} {
    if(!ctrl.value.match(/[^a-zA-Zd]/))
        return {'needsSpecialCharacter': true}

    return null;
}

这项工作很棒，我很喜欢 Angular2，但现在我正在尝试编写一个验证器来验证确认密码"是否等于密码".为了做到这一点，我需要能够针对另一个字段验证一个字段.我可以轻松地在组件级别执行此操作，只需检查模糊、提交或任何其他方式，但这绕过了 Angular2 ngForm 验证系统.我非常想弄清楚如何为一个字段编写一个 Angular2 验证器，该字段可以通过传入另一个字段的名称或与此接近的名称来检查另一个字段的值.这似乎应该是一项功能，因为这在几乎所有复杂的业务应用程序 UI 中都是必需的.

This work great, and I'm loving Angular2, but now I'm trying to write a validator that verifies that the "Confirm Password" is equal to the "Password". In order to do this, I need to be able to validate one field against the other. I can easily do this at the component level, and just check on blur, or on submit, or any number of other ways, but this bypasses the Angular2 ngForm validation system. I would very much like to figure out how to write an Angular2 Validator for a field that can check the value of another field, by passing in the name of the other field or something close to this. It seems this should be a capability as this would be a necessity in almost any complex business application UI.

推荐答案

您需要为一个完整的表单组分配一个自定义验证器来实现这一点.像这样:

You need to assign a custom validator to a complete form group to implement this. Something like this:

this.form = this.fb.group({
  name:  ['', Validators.required],
  email: ['', Validators.required]
  matchingPasswords: this.fb.group({
    password:        ['', Validators.required],
    confirmPassword: ['', Validators.required]
  }, {validator: this.matchValidator})  <--------
});

这样您就可以访问组的所有控件，而不仅仅是一个... 这可以使用 FormGroup 的 controls 属性访问.触发验证时提供 FormGroup.例如:

This way you will have access to all controls of the group and not only one... This can be accessed using the controls property of the FormGroup. The FormGroup is provided when validation is triggered. For example:

matchValidator(group: FormGroup) {
  var valid = false;

  for (name in group.controls) {
    var val = group.controls[name].value
    (...)
  }

  if (valid) {
    return null;
  }

  return {
    mismatch: true
  };
}

查看此问题了解更多详情:

See this question for more details:

• 依赖于多个表单字段的Angular2验证器

这篇关于Angular2 中的跨字段验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！