如果表单输入字段具有焦点并且具有验证错误,则锚点标记单击不在表单中

时间:2015-04-08 11:20:29

标签: angularjs

<body ng-app="debounceExample">
  <div ng-controller="ExampleController">
  <form name="form" ng-submit="go()" novalidate>
    <label>Name:</label>
    <input name="input" type="text" required ng-model="user"  /><br />
     <div  ng-messages="form.input.$error" ng-show="form.input.$touched">
           <div  ng-message="required">required</div>
     </div>

    <a href="" ng-click="go()">test</a>
  </form>
</div>
</body>

请关注输入字段并单击锚标记。您可以看到,锚点标记点击不起作用,因为在模糊时触发输入字段验证。我看到问题是由于在ng-show中使用了form.input。$。我已经创建了一个可以重现问题的plunker。

http://plnkr.co/edit/0NMhxP18EhBjLyKrJQV5?p=preview

要重现此问题,请先关注输入字段,然后单击锚标记。

2 个答案:

答案 0 :(得分:1)

如果您将ng-show更改为

ng-show="!form.input.$pristine"

您可能会获得所需的行为。 这是更新后的plnkr

答案 1 :(得分:0)

您可以删除href =&#39;&#39;来自你的锚标签。它甚至在你的plunkr也工作正常,所以我不确定实际问题是什么。表单有自己的范围,所以如果你尝试类似

的话
<a ng-click='myVar = !myVar'>click me</a>

并在你赢得的表格之外设置myVar = false。你需要$ parent.myVar,但这不是这里的情况。