手動突出顯示角度表單的所有無效輸入

Question

該任務還挺原始。

我得到了一個帶有各種輸入的簡單的Angular表單，並且我想手動突出顯示無效輸入（例如，在提交操作上）。

我試圖循環無效輸入，假設他們必須有一些方法來突出顯示錯誤，但不幸的是他們沒有。

與表格相同。 $setDirty()也沒有工作。

我使用ng-form指令來訪問表單和輸入。

AngularJS版本是1.2.x.

Answer 1

你形成了標記應該是什麼樣子，所以，當你在提交納克級的點擊將增加對formsubmitted類，這將使你的想法，只要你對形式和現場遞交類有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; 
} 

Answer 2

使用ng-pattern和要求它會檢查你的驗證。和onSubmiy你可以定製你的驗證還

例子：http://jsfiddle.net/kevalbhatt18/dmo1jg02/

<div ng-app ng-controller="formCtrl"> 
<form name="myForm" ng-submit="onSubmit()"> 
    <input type="number" ng-model="price" name="price_field" ng-pattern="/^[0-9]{1,7}$/" required> 
    <span ng-show="myForm.price_field.$error.pattern">Not a valid number!</span> 
    <input type="submit" value="submit"/> 
</form> 
</div> 

的js

function formCtrl($scope){ 
    $scope.onSubmit = function(){ 
     alert("form submitted"); 
    } 
}