如何在Angular/HTML中動態加載驗證錯誤

Question

我有一個窗體控件，用戶必須輸入Id。我已驗證提交按鈕，以便只在字段填充值（僅限數字）時啓用。

<input type="text" ng-model="Movie_Id" name="Movid" ng-pattern="onlyNumbers" required/> 
<input type="submit" value="Add" ng-disabled="adduserform.$invalid" data-ng-click="Save()"/> 

但我想，當他試圖進入字母，如「你應該只輸入數字」，因爲用戶可能不知道爲什麼提交按鈕是無效的，當他進入字母的理由來動態通知用戶。

Answer 1

爲此目的，您可以使用$error屬性的字段級別$error屬性的形式。

<form name="adduserform"> 
    <input type="text" ng-model="Movie_Id" name="Movid" ng-pattern="onlyNumbers" required/> 
    <span ng-show="adduserform.Movid.$invalid"> Only number are allowed</span> 
    <input type="submit" value="Add" ng-disabled="adduserform.$invalid" data-ng-click="Save()"/> 
</form> 

在上面的例子中我用了adduserform.Movid.$invalid這將告訴我們，Movid是有效字段與否，&如果沒有有效的，那麼將顯示驗證消息。

更新

，因爲我們希望兩個不同的錯誤，是展示我們可以使用$error.required得到所需錯誤& $error.pattern拿到模式匹配或不

標記

<span style="color:red" ng-show="adduserform.Movid.$dirty && adduserform.Movid.$invalid"> <br /> 
    <span ng-show="adduserform.Movid.$error.required" class="spnmsg">Field must not be empty</span> 
    <span ng-show="adduserform.Movid.$error.pattern">Only Numbers</span> 
</span> 

Working Plunkr