Вам необходимо создать пользовательскую директиву для проверки в реальном времени на полях ввода. Это даст действительный и недействительный класс CSS полю ввода на основе вашего условия для изменения предупреждения об ошибке стиль, например, вы можете сделать вашу рамку красной, когда поле недействительно.
Если вы знаете, как стиль перейти к следующей части:
<input ng-required="true" ng-model="modelName" type="text" abc="modelName">
и ваша директива будет записана как:
App.directive("abc", function() {
return {
require: "ngModel",
//name your scope key and value.
scope: {
abc: "=abc"
},
link: function(scope, element, attributes, modelVal) {
modelVal.$validators.abc= function(val) {
//Write your logic or condition in this function
//return false if invalid and return true if valid.
/*
if(condition)
{
//if true
reutrn true;
}
else{
//if false
return false
}
*/
};
scope.$watch("abc", function() {
modelVal.$validate();
});
}
};
});
и если вы хотите, чтобы ваша форма не отправляла , если какое-либо поле недопустимо, то ваш тег формы станет таким:
<form ng-submit="myForm.$valid && submitFunction()" name="myForm">
не забудьте дать имя вашей форме и использовать это имя для проверки всей формы.
Вот контроллер, который вы запросили @joy:
var app = angular.module('plunker', ['angularMoment', 'ui.bootstrap']);
app.controller('MainCtrl', function($scope, moment) {
$scope.isEditableMode = true;
$scope.isSubmitClicked = false;
$scope.myform =''
$scope.c ={
"ABC": {
"type": "LABEL",
"editable": false
},
"Title": {
"value": "Ms",
"type": "FIELD",
"editable": false,
"dataType": "",
"required":false
},
"First Name": {
"value": "",
"type": "FIELD",
"editable": true,
"dataType": "",
"required":true
},
"Middle Name": {
"value": "",
"type": "FIELD",
"editable": true,
"dataType": "",
"required":false
},
"Last Name": {
"value": "",
"type": "FIELD",
"editable": true,
"dataType": "",
"required":true
}
}
$scope.submit = function ($event) {
$scope.isSubmitClicked = true;
};
});
app.directive("checkInput", function() {
return {
require: "ngModel",
//name your scope key and value.
link: function(scope, element, attributes, modelVal) {
modelVal.$validators.checkInput= function(val) {
var numberRegex= /^[0-9]+$/;
if (val.match(numberRegex))
{
return false
}
else{
return true
}
console.log(val);
};
scope.$watch("val", function() {
modelVal.$validate();
});
}
};
});
ваш элемент ввода html:
<input type="text" name="{{key}}" class="form-control" ng-model="value.value" ng-required="value.required && isSubmitClicked" check-input>
Надеюсь, я ответил на ваш вопрос. Примите это, чтобы мы могли закрыть эту ветку, и другие могут использовать это решение.