具有模板元素参考的 Angular2+ 输入元素未更新

Question

我有一个密码更改表单，只要新密码和重复密码不相等，"Save password" 按钮就会被禁用。为了保持控制器 'clean'，我将 Template Element Reference 映射到重复项 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>

现在发生了意想不到的事情。当我更改重复字段的值时，输出不会改变。但是一旦我更改了表单中的另一个输入，输出就变成了输入元素的值——所以它不像一个分配了 [(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>

参见this stackblitz。

具有模板元素参考的 Angular2+ 输入元素未更新

Angular2+ Input element with Template Element Reference not updating

angular

typescript

variables

angular-ngmodel

angular-forms