Мы используем простую форму в нашем проекте, и теперь я просто создал форму, которая загружается как угловой шаблон. Я также хотел бы обработать валидацию с использованием угловых, но принимать ошибки из ответа. Знаете ли вы, что готовы пойти на угловые директивы для обработки ошибок проверки простой формы?
Вот стратегия проверки формы для угловых форм:
ng-minlength: укажите минимальную длину вводимого текста
ng-maxlength: укажите максимальную длину вводимого текста
var app = angular.module('validationExample', []);
app.directive('ensureUnique', ['$http', function($http) {
return {
require: 'ngModel',
link: function(scope, ele, attrs, c) {
scope.$watch(attrs.ngModel, function() {
$http({
method: 'POST',
url: '/api/check/' + attrs.ensureUnique,
data: {'field': attrs.ensureUnique}
}).success(function(data, status, headers, cfg) {
c.$setValidity('unique', data.isUnique);
}).error(function(data, status, headers, cfg) {
c.$setValidity('unique', false);
});
});
}
}
}]);
var app = angular.module('validationExample', []);
app.directive('ensureUnique', ['$http', function($http) {
return {
require: 'ngModel',
link: function(scope, ele, attrs, c) {
scope.$watch(attrs.ngModel, function() {
$http({
method: 'POST',
url: '/api/check/' + attrs.ensureUnique,
data: {'field': attrs.ensureUnique}
}).success(function(data, status, headers, cfg) {
c.$setValidity('unique', data.isUnique);
}).error(function(data, status, headers, cfg) {
c.$setValidity('unique', false);
});
});
}
}
}]);
Таким образом вы можете получить доступ к полям формы
formName.inputFieldName.property
Вы можете проверить, затронута ли форма пользователем или нет
formName.inputFieldName.$pristine;
Вы можете проверить, затронута ли форма пользователем пользователем, или нет напротив $ нетронутой
formName.inputFieldName.$dirty
Вы можете проверить, действительна ли форма или нет.
formName.inputFieldName.$valid
Его противоположность $ valid
formName.inputFieldName.$invalid
вы также можете форматировать форму, используя эти имена классов
.ng-pristine {}
.ng-dirty {}
.ng-valid {}
.ng-invalid {}