Сообщение об ошибке группы проверки формы AngularJS

Question

Сообщение об ошибке группы проверки формы AngularJS

0

В angularJs FORM SUBMIT показано, как отображать все сообщения проверки в одном div внизу страницы. Пример:

<div id="err-msg"> <!-- error message will come here --></div>

Я ссылался на документы, но все они отображаются ниже текстового поля, используя

<p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="alert alert-danger">Enter a valid email.</p>

Как написать одну область для привязки всех сообщений в одном месте (не используйте этот userForm.email.$invalid)

Примечание. Я попробовал ng-message но я не понимаю, кто-нибудь мне помогает. Пожалуйста, ознакомьтесь с приведенным ниже кодом для нормального отображения ошибки JQuery HMTL, так как вам нужно позаботиться, используя AngularJS

HTML

<div id="main">
<form> <div><input id="email_txt" type="text" name ="email" value="" > </div>
<div><input id="pass_txt" type="password" name ="password" value="" > </div>
<div><input id="validate_btn" type="submit" value="Validate" > </div>
</form>
</div>
<div id="err-msg"> <!-- error message will come here --></div>

JQuery:

$('#main').on('click', '#validate_btn', function() { 
 if($('#email_txt').val().length == 0){
$('#err-msg').val("Please enter emailid!");
}else if($('#pass_txt').val().length == 0){
$('#err-msg').val("Please enter password!");
}
...
...
else{
  alert("Good");
}
});

Текущий код AngularJS:

<form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate>
<div class="form-group">
  <label>Username</label>
  <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
   <p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
   <p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p> </div> 
   <input type="email" name="email" class="form-control" ng-model="email">
   <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
   <button type="submit" class="btn btn-primary">Submit</button>
<form>

app.js

.controller('validatectrl',['$scope',function($scope){
     $scope.submitForm = function(isValid) {
     // check to make sure the form is completely valid
     if (isValid) {
         alert('Good');
     }

    };
 }]);

Как переписать?

Subha 16 июль 2015, в 16:43

Источник

0

если вы хотите показать сообщение в одном div, почему вы не перемещаете все свои теги <p> в div? это не работает?
manoj 16 июль 2015, в 13:53
0

будет работать ... но мне нужно написать 3 р тегов для первого текстового поля, а затем 3 р тегов для второго текстового поля, как нужно написать .. так что, чтобы избежать этого ...
Subha 16 июль 2015, в 14:10
0

Я думаю, что если вы хотите получать сообщения о проверке, относящиеся к конкретным / конкретным ошибкам, вы должны делать это только так
manoj 16 июль 2015, в 14:21
0

хороший пример здесь в docs docs.angularjs.org/api/ng/directive/input
Jorge 16 июль 2015, в 15:01

Показать ещё 2 комментария

Теги:

javascript

jquery

html

angularjs

1 ответ

Ещё вопросы

если вы хотите показать сообщение в одном div, почему вы не перемещаете все свои теги <p> в div? это не работает?
будет работать ... но мне нужно написать 3 р тегов для первого текстового поля, а затем 3 р тегов для второго текстового поля, как нужно написать .. так что, чтобы избежать этого ...
Я думаю, что если вы хотите получать сообщения о проверке, относящиеся к конкретным / конкретным ошибкам, вы должны делать это только так
хороший пример здесь в docs docs.angularjs.org/api/ng/directive/input

Joy · Answer 1 · 2015-07-16T13-30-00.000Z

Если форма недействительна, ошибки будут храниться в объекте $scope.form.$error. Проверьте консоль этого JSFiddle. Из свойства $error в форме вы можете заполнить сообщения об ошибках.

angular.module('Joy', [])
    .controller('FormCtrl', ['$scope', function ($scope) {
        $scope.user = {};
        $scope.submit = function () {
            console.log($scope.userInfo);
        };
    }]);

HTML:

<div ng-app="Joy" id="play-ground">
    <form name="userInfo" novalidate ng-controller="FormCtrl">
        <div class="ui input">
            <input ng-model="user.email" ng-message="YOU ARE WRONG" name="User Email" type="email">
        </div>
        <div class="ui input">
            <input ng-model="user.name" name="User Name" type="text" required>
        </div>
        <div class="ui divider"></div>
        <button class="ui primary button" ng-click="submit()">Submit</button>
        <div class="ui positive message">User: {{ user | json }}</div>
    </form>
</div>