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?

I don't understand. What's the difference between calling the component property you're binding to newPasswordRepeat or passwordRepeatModelVal? What's newPasswordRepeat then, in the first case? — Oscar Paz
– Oscar Paz, Commented May 3, 2018 at 15:31
For passwordRepeatModelVal I have to decare a property in the controller but using a template reference #passwordRepeatInput there shouldn't be a need for this declaration — Bernie
– Bernie, Commented May 3, 2018 at 15:33
But in your first case, newPasswordRepeat is not a template reference, is it? What does it reference? — Oscar Paz
– Oscar Paz, Commented May 3, 2018 at 15:40
If newPasswordRepeat is not defined, then passwordRepeatInput.value is always the same (probably an empty string). — Martin Parenteau
– Martin Parenteau, Commented May 3, 2018 at 15:42

Martin Parenteau · Accepted Answer · 2018-05-03 16:22:05Z

2

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.

edited May 3, 2018 at 16:22

answered May 3, 2018 at 15:47

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2+ Input element with Template Element Reference not updating

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related