Angular 4 Template-Forms 多字段验证指令和 ngModelGroup答案

【问题标题】：Angular 4 Template-Forms multi-field validation directive and ngModelGroupAngular 4 Template-Forms 多字段验证指令和 ngModelGroup
【发布时间】：2017-12-28 23:04:15
【问题描述】：

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

模板表单

 <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。

密码指令 Angular 2 Forms | 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 {
}

但是，“确认密码”输入中永远不会显示所需的错误消息。即使从调试输出中可以明显看出该指令正在工作：

【问题讨论】：

您使用的代码来自：github.com/kara/ac-forms 吗？还是您输入了自己的代码？
@JGFMK，我自己的代码
可能也一样。我尝试下载和 npm 安装该项目..很多过时的东西。所以不要直接尝试发球。可惜作者没有发布更新的 package.json。
您是否尝试将您的项目上传到 Plunker？如果你这样做了，你可以发布一个人们可以运行的链接。你需要一个 github 帐户才能做到这一点,,,
我需要确认密码上的“必需”，这会以某种方式触发错误消息逻辑。

标签： angular angular-directive

【解决方案1】：

在您的代码中：

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

我注意到在 Kara 的视频中 @18:13 看起来像这样：
<input ngModel name="password" ... #password="ngModel">

尝试将这两个地方的代码更改为此语法/序列，看看是否可以解决问题。

提示：这是因为 newPasswd 是您的语法肯定需要的指令。
您使用的是 name 中的 newPassword，而不是 # Angular 模板变量。

【讨论】：