Элемент ввода Angular2 + со ссылкой на элемент шаблона не обновляется

Question

У меня есть Форма для смены пароля, и кнопка «Сохранить пароль» отключена, если новый пароль и его повторение не совпадают. Чтобы сохранить контроллер "чистым", я сопоставил Template Element Reference с повторением input.

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

Сохранить пароль

Теперь неожиданные вещи случаются. Когда я изменяю значение поля повторения, вывод не изменится. Но как только я изменяю другой вход в форме, выход становится значением входного элемента - поэтому он не называется как элемент, которому назначен атрибут [(ngModel)].

Как только я указываю новое свойство модели в моем контроллере и сопоставляю его с полем повторения через [(ngModel)], работает ссылка на элемент шаблона и изменяет выход при каждом изменении входного значения.

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

Но есть ли способ установить ожидаемое поведение без лишних свойств в контроллере?

Answer 1

Представление также должно корректно обновляться, если вы самостоятельно применяете директиву ngModel к повторяющемуся элементу input, не привязывая его к свойству:

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

См. этот стек * блиц .