angularJs Формализация с динамическим сообщением об ошибке

Я хочу проверить форму, где для каждого входа может быть много сообщений об ошибках в соответствии с вводом. Я хочу написать это сообщение об ошибке из javaScript.angularJs Формализация с динамическим сообщением об ошибке

HTML

<input name="username" ng-model="user.username" type="text" placeholder="Username" required> 
<div class="field-message" ng-messages="frm.username.$error" ng-if='frm.username.$dirty' ng-cloak> 
    <div ng-message="required">Username is required</div> 
</div>

angular.module('DemoApp', ['ngMessages']);  
angular.bootstrap(document.getElementById('demoApp'), ['DemoApp']);

В приведенном выше коде директивы нг-сообщения есть сообщение об ошибке, которое будет отображаться, если вход не действует. Если существует так много случаев для проверки, и каждый случай имеет другое сообщение об ошибке, то несколько ng-сообщений должны добавлять html для конкретного управления вводом.

Я хочу только ввести тег в html и сообщение об ошибке, которое должно быть получено из javascript.

Может ли любой гид быть каким образом я могу достичь этого? Спасибо.

источник

2016-02-16 Praveen D

Смотрите этот вопрос: How to add custom validation to an AngularJS form?

Резюмируя:

Вы можете использовать ui-validate

ИЛИ

Вы можете просто создать пользовательскую проверку, как и (копируется из ответа на исходный вопрос):

app.directive('blacklist', function(){ 
    return { 
     require: 'ngModel', 
     link: function(scope, elem, attr, ngModel) { 
      var blacklist = attr.blacklist.split(','); 

      //For DOM -> model validation 
      ngModel.$parsers.unshift(function(value) { 
      var valid = blacklist.indexOf(value) === -1; 
      ngModel.$setValidity('blacklist', valid); 
      return valid ? value : undefined; 
      }); 

      //For model -> DOM validation 
      ngModel.$formatters.unshift(function(value) { 
      ngModel.$setValidity('blacklist', blacklist.indexOf(value) === -1); 
      return value; 
      }); 
     } 
    }; 
});

И вот несколько примеров использования:

<form name="myForm" ng-submit="doSomething()"> 
    <input type="text" name="fruitName" ng-model="data.fruitName" blacklist="coconuts,bananas,pears" required/> 
    <span ng-show="myForm.fruitName.$error.blacklist"> 
     The phrase "{{data.fruitName}}" is blacklisted</span> 
    <span ng-show="myForm.fruitName.$error.required">required</span> 
    <button type="submit" ng-disabled="myForm.$invalid">Submit</button> 
</form>

EDIT: По запросу OP, в печати только соответствующая ошибка:

Plunkr: http://plnkr.co/edit/KN0Oukb8uACvZjtGPUg4?p=preview

var app = angular.module('angularjs-starter', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.doSomething = function() { 
 
    alert('Submitted!'); 
 
    } 
 

 
    $scope.getErrors = function() { 
 
    if ($scope.myForm.fruitName.$error.required) { 
 
     return 'This field is required'; 
 
    } else if ($scope.myForm.fruitName.$error.blacklist) { 
 
     return 'The phrase ' + $scope.data.fruitName + ' is blacklisted'; 
 
    } 
 
    } 
 
}); 
 

 
app.directive('blacklist', function() { 
 
    return { 
 
    require: 'ngModel', 
 
    link: function(scope, elem, attr, ngModel) { 
 
     var blacklist = attr.blacklist.split(','); 
 
     ngModel.$parsers.unshift(function(value) { 
 
     ngModel.$setValidity('blacklist', blacklist.indexOf(value) === -1); 
 
     return value; 
 
     }); 
 
    } 
 
    }; 
 
});

.invalid { 
 
    color: red; 
 
} 
 
.ng-invalid { 
 
    border-color: red; 
 
}

<!DOCTYPE html> 
 
<html ng-app="angularjs-starter"> 
 
    <head lang="en"> 
 
    <meta charset="utf-8"> 
 
    <title>Custom Plunker</title> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> 
 
    </head> 
 
    
 
    <body ng-controller="MainCtrl"> 
 
    <form name="myForm" ng-submit="doSomething()"> 
 
     <div>Please <u>don't</u> type the words: coconuts, bananas or pears.</div> 
 
     <input type="text" name="fruitName" ng-model="data.fruitName" blacklist="coconuts,bananas,pears" required/> 
 
     <span class="invalid" ng-show="myForm.fruitName.$error">{{getErrors()}}</span> 
 
     <br/> 
 
     <button type="submit" ng-disabled="myForm.$invalid">Submit</button> 
 
     <button type="button" ng-click="getErrors()">Get errors</button> 
 
    </form> 
 
    </body> 
 
</html>

источник

2016-02-16 12:04:20 Noy

Он Вы добавили два диапазона для двух сообщений об ошибке. если есть 100, тогда нам нужно добавить 100 пролетов с директивой ng-show. это не хорошо. поэтому я хочу только один диапазон, который будет содержать сообщение об ошибке, и сообщение об ошибке должно быть размещено в файле JavaScript. –

Вы можете использовать 'ng-messages-include', чтобы включить все 100 сообщений. Вы можете определить это 100-сообщение в отдельном файле, а затем включить его. –

@PraveenD вы всегда можете иметь функцию в контроллере и анализировать myForm.fruitName. $ Error - тогда вы можете распечатать только соответствующую ошибку – Noy

angularJs Формализация с динамическим сообщением об ошибке

ответ

Смежные вопросы