Question

我有一个密码更改表单，只要新密码和重复不相等，就会禁用“保存密码”按钮。为了保持控制器“干净”，我已将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指令单独应用于repeat input元素，而不将其绑定到属性，则视图也应该正确更新：

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

请参阅this stackblitz。

带有模板元素参考的Angular2 + Input元素未更新

1 个答案: