Question

我刚刚开始研究AngularJS，我正在尝试表单验证。当我想在表单时突出显示红色字段时。$ invalid为true。表单上的所有字段都是必需的，这是唯一可能的验证。

某些字段在加载表单时选择了值，其他字段没有任何初始值。

现在将红色突出显示的颜色添加到我执行的必填字段中：

 <form name="createForm" >
  <input type="text" name="name" ng-class="createForm.$invalid ? 'invalidaClass' : ''" required>

   ...
 </form>

其中invalidClass将红色应用于必填字段。但是，当我加载表单时，所有字段y默认为红色高亮颜色并应用了invalidClass。我也打印了

     {{createForm.$invalid}}

页面加载时的

属性值，它为null。我想在字段中没有值的情况下将红色突出显示应用于字段。但不是在表格的负荷。这是我面临的有效方案吗？这样做的正确方法是什么？

   In Addition to this I would like to  show this error only when I click on one of the two buttons. How to achieve this?

Answer 1

您在必填字段上获得红色边框，因为浏览器默认提供HTML验证。您应该使用novalidate告诉浏览器在默认情况下不进行任何验证。像

<form name="createForm"  novalidate>

您应该使用控制器中的ng-click或ng-submit验证表单数据。

Answer 2

使用$ pristine进行表单验证，

<form name="testForm" novalidate>
<div class="form-group" ng-class="{ 'has-error' : testForm.test.$invalid && !testForm.test.$pristine }">
<input class="form-control" type="text" ng-model="test" id="txtPickUpPoint" name="test" required>
<p ng-show="testForm.test.$invalid && !testForm.test.$pristine" class="help-block">Error Message.</p>
</div>
</form>

仅在表单无效且表单加载时不显示错误时显示。

Answer 3

单击“{1}}”提交按钮时，可以设置标记。

ng-click="submitClicked=true"

类似地，对于应该使用或不使用输入区域的情况，可以使用$ dirty和$ pristine，也可以在输入区域失去焦点后使用<form name="myForm" novalidate> <div class="form-group" ng-class="{ 'warning' : myForm.$invalid && submitClicked }" required> <input class="form-control" type="text" ng-model="input1" required> <p ng-show="myForm.$invalid && submitClicked">Error Message.</p> </div> <button type="submit" ng-click="submitClicked=true"></button> </form>委派任务。 this tutorial中的大多数属性都有很好的解释。

Answer 4

由于输入字段上需要验证程序，表单在表单加载时无效。在表单加载时，输入字段为空，因此它无效。

只有当用户点击提交按钮时，您才能通过组合form.$invalid和另一个真实信号来实现您想要的效果。

为什么AngularJs形成。当表单加载时，$ invalid为true

4 个答案: