angularjs - 即使值无效，Angular 模型也会更新

Question

我是 Angular 的新手，在尝试表单验证时我遇到了以下情况:

设置:我的表单中有一个“必填”字段，它绑定(bind)到一个 ng-model 并有一个默认值和一个重置按钮。我在 para 标签中打印它的值。

问题

1. 现在，当我从字段中删除值时，即使该值无效，我的 para 标记也会更新为 null(无值)。所以我的问题是，即使新值无效，为什么我的模型值也会更新。

2. 另外，当我点击重置时，字段被重置，但表单的有效状态仍然为真，模型也没有更新。这是为什么？

这是代码:http://plnkr.co/edit/fqczGwbponOW0kgs23Jn?p=preview

    <form name="testForm">
      <label>Name:</label>
      <input type="text" ng-init="yourName = 'Sam'" ng-model="yourName" placeholder="Enter a name here" required>
      <input type="reset" />
      <p>Is form valid : {{testForm.$valid}}</p>
    </form>
    <p>Hello {{yourName}}!</p>

Answer 1

这是因为重置超出了 Angular JS 的范围。 AngularJS 模型不知道输入值已经使用 reset 更新，除非你明确告诉它。

您可以查看我对这个问题的回答以供进一步引用: Angular model doesn't update when changing input programmatically

您也可以将代码修复为:

    <form name="testForm">
      <label>Name:</label>
      {{yourName}}
      <input type="text" ng-init="yourName = 'Sam'" ng-model="yourName" placeholder="Enter a name here" required>
      <input type="reset" ng-click="yourName = ''"/>
      <p>Is form valid : {{testForm.$valid}}</p>
    </form>