Angular 4 Template-Forms多字段验证指令和ngModelGroup [英] Angular 4 Template-Forms multi-field validation directive and ngModelGroup

问题描述

我正在尝试使用Angular Directive验证典型的new password和confirm password匹配.即使指令正确捕获了不匹配，也不会显示错误消息:

I am trying to validate a typical new password and confirm password match using an Angular Directive. The error message is not shown even though the directive correctly catches a mis-match:

模板表格

 <form>
    <md-input-container class="signup-full-width">
      <input 
        mdInput 
        autocomplete="off" 
        type="password"
        name="password"
        #currentPasswd="ngModel" 
        placeholder="Current password" 
        [(ngModel)]="currentPassword"            
        required>
        <md-error *ngIf="currentPasswd.errors && (currentPasswd.dirty || currentPasswd.touched)" [ngStyle]="{'color': 'red'}"> 
          <div [hidden]="!currentPasswd.errors.required">Required</div>
        </md-error>                      
    </md-input-container>

     <div ngModelGroup="passwordGroup" password-matcher #passwordGroup="ngModelGroup"> 
      <md-input-container class="signup-full-width">
        <input 
          mdInput 
          autocomplete="off"
          type="password"                
          name="newPassword"
          #newPasswd="ngModel" 
          placeholder="New password" 
          [(ngModel)]="newPassword" 
          required
          minlength="8"
          maxlength="15">
        <md-error *ngIf="newPasswd.errors && (newPasswd.dirty || newPasswd.touched)" [ngStyle]="{'color': 'red'}"> 
          <div [hidden]="!newPasswd.errors.required">Required</div>
          <div [hidden]="!newPasswd.errors.minlength">Must be at least 8 characters</div>
          <div [hidden]="!newPasswd.errors.maxlength">Must be at most 15 characters</div>
        </md-error>                      
      </md-input-container>

      <md-input-container class="signup-full-width">
        <input 
          mdInput    
          autocomplete="off"
          type="password"            
          name="confirmPassword" 
          placeholder="Confirm password" 
          [(ngModel)]="confirmPassword">
         <md-error *ngIf="passwordGroup.control?.errors" [ngStyle]="{'color': 'red'}">  
          <div [hidden]="!passwordGroup.control.errors.noMatch">Passwords do not match</div>
         </md-error>             
      </md-input-container>
    </div>

    <p>passwordGroup.control?.errors: {{passwordGroup.control?.errors | json}}</p>

  </form>

请注意div周围新密码"和确认密码"字段中的ngModelGroup.

Please note the ngModelGroup on the div surrounding 'new password' and 'confirm passords' fields.

密码指令 角度2形式|卡拉·埃里克森(Kara Erickson)

function passwordMatcher(c: AbstractControl) {
  if (!c.get("newPassword") || !c.get("confirmPassword")) return null;

  return c.get("newPassword").value === c.get("confirmPassword").value
    ? null : {"noMatch": true};
}

@Directive({
  selector: '[password-matcher]',
  providers: [
    {provide: NG_VALIDATORS, multi: true, useValue: passwordMatcher}
  ]
})
export class PasswordMatcher {
}

但是，所需的错误消息永远不会显示在确认密码"输入上.即使该指令在调试输出中似乎可以正常工作:

However, the desired error message is never shown on 'Confirm Password' Input. Even though the directive appears to be working as evident from the debug output:

推荐答案

在您的代码中，您具有:

In your code you have:

<input #newPasswd="ngModel" ... [(ngModel)]="newPassword" >

我在Kara的视频中注意到@ 18:13的样子:
>

I noticed @18:13 in Kara's video it looked like this:
<input ngModel name="password" ... #password="ngModel">

尝试在两个地方都将代码更改为此语法/顺序，看看是否可以解决该问题.

Try changing your code in both places to this syntax/sequence see if that fixes it.

提示:这是因为newPasswd是您的语法中肯定需要的指令.
您使用的是名称而不是#Angular模板变量的newPassword.

Hint: It's because newPasswd is what directive would need surely with your syntax.
You are using newPassword from name, not the # Angular template variable.

这篇关于Angular 4 Template-Forms多字段验证指令和ngModelGroup的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！