Angular JS ng-Сообщения, не отображающие сообщений об ошибках

Привет Я новичок в создании валидации с использованием Angular JS, поэтому я много огляделся и нашел тот, который был хорошим учебником. Учебник можно найти here. Я знаю, что есть несколько сообщений о стеке около ng-messages, однако я просмотрел их, и они, похоже, не относятся к моей проблеме.Angular JS ng-Сообщения, не отображающие сообщений об ошибках

Я установил ng-messages с помощью беседки и запустил его с помощью grunt. Нет ошибок, однако мои сообщения о проверке, похоже, не срабатывают.

Мой HTML выглядит следующим образом:

<form name="myForm" novalidate> 
    <fieldset> 

    <div id="number" ng-class="{ 'has-error' : myForm.clientNumber.$invalid && !myForm.clientNumber.$pristine }"> 
     <label for="client">SRF #: *</label> 
     <input type="text" name="clientNumber" placeholder="Enter SR #" ng-minlength="3" ng-maxlength="9" required> 
     <div ng-messages="myForm.clientNumber.$error"> 
     <!--<div ng-message="required" >SRF # is required.</div>--> 
     <div ng-message="minlength" >SRF Number is too short.</div> 
     <!--<div ng-message="maxlength">SRF Number is too long.</div>--> 
     </div> 
    </div> 
    </fieldset> 
</form>

Часть моих app.JS выглядит следующим образом:

angular 
    .module('myApp', [ 
    // Angular 
    'ngAnimate', 
    'ngCookies', 
    'ngResource', 
    'ngSanitize', 
    'ngTouch', 
    'ui.router', 
    'myApp.home', 
    'restangular', 
    'ngMessages' 
])

Часть моего контроллера заключается в следующем:

(function() { 
    'use strict'; 
    angular.module('myApp.home', [ 
    'ui.router', 
    'myApp.myFactory', 
    'ngMessages' 
]) 
.config(homeConfig) 
.controller('homeCtrl', home); 

homeConfig.$inject = ['$stateProvider']; 
home.$inject = ['$http','myFactory','$timeout']; 

function home($http,myFactory,$timeout) { 
    ... 
}

То, что я смотрел и пробовал:

Некоторые из них являются учебниками, а другие - сообщениями в Stack. ngMessages/angular validation not working.

Заранее спасибо, любая помощь очень ценится, так как я не понимаю, почему она не работает. Все сайты, которые я видел, выглядят так же, как и все.

источник

2016-08-22 L1ghtk3ira

событие не упоминается в вашем HTML код, на котором вы можете отобразить 'ngMessage'.Check это [SO Ответ] (HTTP: // StackOverflow.com/questions/35694777/how-to-show-highlight-error-in-md-input-container-when-click-submit/35695022 # answer-35695022) –

ему нужна функция ng-submit или она не пойдет? – L1ghtk3ira

Я положил его, но он не работает, я бы привел пример. Я попробовал свой метод ng-click, но эта функция больше не будет срабатывать. – L1ghtk3ira

Все, что нам нужно сделать, это добавить ng-model к нашему входу.

директива ngModel связывает ввод, выберите текстовой (или контроль пользовательской формы) к собственности на сферу с помощью NgModelController, который создается и подвергается этой директивой.

Короче говоря, без ng-model на <input> Элемент Angular не заботится об этом.

Посмотрите на рабочий снимок ниже.

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
    <head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-messages.js"></script> 
 

 
    <script> 
 
     var app = angular.module('app', ['ngMessages']); 
 
     app.controller('RegistrationScreenController', function() {}); 
 
    </script> 
 
    
 
    </head> 
 

 
    <body ng-app="app" ng-controller="RegistrationScreenController"> 
 
    
 
    <form name="myForm" novalidate> 
 
     <fieldset> 
 
     <div id="number" ng-class="{ 'has-error' : myForm.clientNumber.$invalid && !myForm.clientNumber.$pristine }"> 
 
      <label for="client">SRF #: *</label> 
 
      <input type="text" ng-model="clientNumber" name="clientNumber" placeholder="Enter SR #" ng-minlength="3" ng-maxlength="9" required> 
 
      <div ng-messages="myForm.clientNumber.$error"> 
 
      <div ng-message="required" >SRF # is required.</div> 
 
      <div ng-message="minlength" >SRF Number is too short.</div> 
 
      <div ng-message="maxlength">SRF Number is too long.</div> 
 
      </div> 
 
     </div> 
 
     </fieldset> 
 
    </form> 
 
    </body> 
 

 
</html>

источник

2016-08-22 17:10:25 oKonyk

Я попробую, однако, зачем нам нужна ng-модель для работы? Не могли бы вы добавить пояснения к своему ответу. Спасибо – L1ghtk3ira

Hey It works thanks :) Я не знал, что это нужно. Пожалуйста, добавьте любые объяснения в свой ответ. – L1ghtk3ira

Прохладный! Счастлив, что это помогло. Обновится с объяснением. – oKonyk

# From what i can see, you are missing 'when=required' in your 'ng-message' 
# This should fix it. Refer to examples below. 
# 1) Using 'ng-messages' 
# 2) Using 'ng-show' 

//--------------------------------------------------------------------------------------------------------------- 
# HTML - Angular Material Design 
# Follow the following example below and it should work. 
# Am basically using 'ng-message' to show the error message 

<form name="editUserForm"> 
    <div flex layout="row"> 
     <md-input-container flex="100"> 
      <label for="firstName">First Name</label> 
      <md-icon md-font-icon="zmdi zmdi-account" style="color:#47B2E8"></md-icon> 
      <input id="firstNameEditUser" 
       label="firstName" 
       name="firstName" 
       type="text" 
       ng-model="vm.contact.firstName" 
       required/> 
      <div ng-messages="editUserForm.firstName.$error"> 
       <div ng-message when="required"><span translate>Please enter your First Name</span></div> 
      </div> 
     </md-input-container> 
    </div> 
</form> 

//--------------------------------------------------------------------------------------------------------------- 


//--------------------------------------------------------------------------------------------------------------- 
# HTML - Angular Material Design 
# Follow the following example below and it should work. 
# Am basically using 'ng-show' to hide and show the error 
# messages 

<form name="changePasswordForm"> 
    <md-input-container class="md-block"> 
     <label for="password">Password</label> 
     <input id="password" 
      label="password" 
      name="password" 
      type="password" 
      ng-model="vm.user.password" 
      required/> 
      <div class="validation-messages-error"> 
       <div ng-show="changePasswordForm.password.$dirty && changePasswordForm.password.$error.minlength"> 
        <span>Password is too short</span> 
       </div> 
       <div ng-show="changePasswordForm.password.$dirty && changePasswordForm.password.$error.maxlength"> 
         <span>Password is too long</span> 
       </div> 
       <div ng-show="changePasswordForm.password.$error.required"> 
         <span>Password required</span> 
       </div> 
      </div> 
    </md-input-container> 
</form> 


//--------------------------------------------------------------------------------------------------------------- 
# CSS Class 

.validation-messages-error { 
    font-size: 12px; 
    color: #dd2c00; 
    margin: 10px 0 0 25px; 
} 

//---------------------------------------------------------------------------------------------------------------

источник

2016-08-22 16:30:04 nocholla

Angular JS ng-Сообщения, не отображающие сообщений об ошибках

ответ

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