在Angular2跨字段验证 [英] Cross field validation in Angular2

问题描述

我建立一个Angular2客户端应用程序。我目前工作的成员组件和MVC6 vNext身份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-Z\d]/))
        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 validator to a complete form group to implement this. Something like that:

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

此方式，您将有机会获得，而不是只有一个组的所有控制......这可以使用控制组控制的属性来访问。后者（没有一个）验证被触发时被直接提供。例如：

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 group control. The latter (not a single one) is directly provided when validation is triggered. For example:

areEqual(group: ControlGroup) {
  var valid = false;

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

    (...)
  }

  if (valid) {
    return null;
  }

  return {
    areEqual: true
  };
}

有关详细信息，请参阅此问题：

See this question for more details:

• Angular2验证依赖于多个表单域

• Angular2 validator which relies on multiple form fields

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