Angularjs - Показать пользовательскую ошибку ngMessage с помощью ui-validate
Я новичок в AngularJS, и я хочу достичь, чтобы создать пользовательский ngMessage с помощью UI-проверки. В этом коде есть 2 текстовых поля, в которые пользователь вводит номера, и я создал условие, где 2-е число должно быть меньше 1-го числа. Это условие было названо в UI-validate.
Пожалуйста, смотрите ниже код:
var app = angular.module('ngMessagesExample', ['ngMessages', 'ui.validate']);
app.controller('ctl', function ($scope) {
$scope.data = {};
$scope.validateInput = function($value) {
if ($value > $scope.data.field1) {
/* show the custom ng-message
"validationError" error */
}
else {
/* don't show error in the ng-message */
}
};
$scope.submitForm = function(isValid) {
alert("all fields are valid.");
};
});<!doctype html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular-messages.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-validate/1.2.3/validate.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="ngMessagesExample" ng-controller="ctl">
<form name="myForm" novalidate ng-submit="submitForm(myForm.$valid)">
<label>
1st Number:
<input type="number"
ng-model="data.field1"
name="field1" required />
</label>
<div ng-messages="myForm.field1.$error" ng-show="myForm.field1.$touched && myForm.field1.$invalid" style="color:red">
<div ng-message="required">this is required</div>
</div>
<br>
<label>
2nd Number:
<input type="number"
ng-model="data.field2"
name="field2" required ui-validate="validateInput($value)" />
</label>
<div ng-messages="myForm.field2.$error" ng-show="myForm.field2.$touched && myForm.field2.$invalid" style="color:red">
<div ng-message="validationError">2nd Number must be less than 1st Number</div>
<div ng-message="required">this is required</div>
</div>
<br/><br/>
<button style="float:left" type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>
</body>
</html>Может ли кто-нибудь помочь мне с этим? Я создал Plunker для этого. Заранее спасибо!