Angular 4 Template-Forms multi-field validation di

Question

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:

Template Form

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

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

The password directive 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 {
}

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:

Answer 1

In your code you have:

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

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.

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.