javascript - 手动突出显示 Angular Form 的所有无效输入

Question

这个任务有点原始。

我得到了一个带有各种输入的简单 Angular 表单，我想手动突出显示无效输入(例如，在提交操作时)。

我尝试循环无效的输入，假设它们必须有某种方法来突出显示错误，但不幸的是他们没有。

与表单相同。 $setDirty() 也不起作用。

我使用 ng-form 指令来访问表单和输入。

AngularJS 版本是 1.2.x。

Answer 1

您的表单标记应该看起来像这样，这样当您单击提交时，ng-class 就会在 form 上添加 subscribed 类，这会让您知道每当您提交时表单和字段上的类具有 ng-invalid 类，您可以突出显示这些元素

标记

<ng-form name="form" ng-class="{submitted: submitted}" ng-submit="submitted=true; submit();">
   <input type="text" name="firstname" ng-model="formData.firstname">
   <input type="text" name="lastname" ng-model="formData.lastname">
   <input type="submit" value="submit">
</ng-form>

CSS

.submitted input.ng-invalid {
   border: solid 1px red;
}