Angular2+ Input element with Template Element Reference not updating

Question

I've a Form for password change and the "Save password" button is disabled as long as the new password and it's repetition is not equal. To keep the controller 'clean' I've mapped a Template Element Reference to the repetition input.

 <form>
     <input [(ngModel)]="newPassword"
            type="password"
            name="new-password"
            id="new-password">

     <input type="password"
            name="new-password-repeat"
            id="new-password-repeat"
            #passwordRepeatInput>

     <!-- This is the output -->
     <pre>{{passwordRepeatInput.value}}</pre>

    <button [disabled]="!!newPassword && passwordRepeatInput.value"
             class="btn btn-primary">
  Save password
</button>

Now unexpected things happen. When I change the value of the repetition field the output won't change. But once I change another input within the form the output becomes the value of the input element — So it does not behalf like an element having the [(ngModel)] attribute assigned.

Once I specify a new model property in my controller and map it to the repetition field via [(ngModel)] the Template Element Reference is working and changes the output whenever the input value changes.

 <input type="password"
        name="new-password-repeat"
        id="new-password-repeat"
        [(ngModel)]="passwordRepeatModelVal" // This solves the problem
        #passwordRepeatInput>

But Is there a way to establish the expected behavior without having unnecessary properties in the controller?

Answer 1

The view should also update correctly if you apply the ngModel directive by itself to the repeat input element, without binding it to a property:

<input type="password"
       name="new-password-repeat"
       id="new-password-repeat"
       ngModel
       #passwordRepeatInput>

See this stackblitz.