Question

我正在使用ng-if隐藏/显示表单验证的错误消息。我基本上希望在用户在URL字段中键入内容时显示错误消息，但这不会被识别为URL。

到目前为止我所做的是：

<input id="input-target-url" type="url" class="form-control" placeholder="Enter a URL here" required autofocus/>
<span ng-if="$('#input-target-url').hasClass('ng-invalid')">
  <i></i>
  <b>Please enter a valid URL</b>
</span>

我的问题是条件在其值发生变化时不会更新。所以我的范围总是隐藏的。

我该如何更改？

Answer 1

相反，请使用Angular在输入元素（http://docs.angularjs.org/api/ng/directive/form）上提供的.$invalid属性。

为您的输入指定myInput并假设您的表单为myForm：

<input id="input-target-url" name="myInput" type="url" class="form-control" placeholder="Enter a URL here" required autofocus/>
<span ng-if="myForm.myInput.$invalid">
  <i></i>
  <b>Please enter a valid URL</b>
</span>

如评论中所述，空字符串是无效的URL，因此即使用户未输入任何内容，也会显示范围。幸运的是，Angular为我们提供了另一个属性：$dirty。这告诉我们用户是否编辑了表单元素，并且可以与上面的内容组合形成：

<input id="input-target-url" name="myInput" type="url" class="form-control" placeholder="Enter a URL here" required autofocus/>
<span ng-if="myForm.myInput.$invalid && myForm.myInput.$dirty">
  <i></i>
  <b>Please enter a valid URL</b>
</span>

更新ng-if当hasClass值更改时

1 个答案: