как показать ошибки в оповещениях после нажатия кнопки отправки с помощью угловых js?

Question

У меня есть форма, на чью кнопку отправки я хочу показать ошибки в форме оповещения, вот мой код. Теперь я показываю ошибки в разных divs. Я хочу показать все необходимые ошибки в одном сообщении. Я не получаю никаких подскажите, как это сделать.

<div class="main-container version-msg-wrapp loginpage-bg"> 
    <div class="login-inner-container"> 
     <div class="logo-cont"></div> 
     <div class="inputs-container"> 
      <form name="userLogin" ng-submit="submitForm(userLogin.$valid)" novalidate> 

       <div class="input-element-row"> 

        <div class="rgt-input-box fl"><span class="center-icon action-icon"></span><input type="text" id="c_code" ng-model="Nuser.centerCode" placeholder="Center Code" name="centerCode" value="" ng-minlength=3 
                             ng-maxlength=5 required/></div> 
        <div class="cb"> 
        </div> 
       </div> 

       <div class="input-element-row"> 
        <div class="rgt-input-box fl"><span class="user-icon action-icon"></span><input type="text" id="u_id" placeholder="User ID" ng-model="Nuser.userID" name="userID" value="" ng-maxlength="20" required/></div> 
        <div class="cb"></div> 
       </div> 


       <div class="input-element-row"> 
        <div class="rgt-input-box fl"><span class="pswd-icon action-icon"></span><input type="password" id="pwd" placeholder="Password" ng-model="busyUser.password" name="password" value="" required /></div> 
        <div class="cb"></div> 
       </div> 

       <div class="input-element-row"> 
        <button type="button" name="" value="" ng-click="StudentSubmit()">Login</button> 
       </div> 

       <div ng-show="submitted && userLogin.centerCode.$dirty && userLogin.$invalid" class="alert alert-danger"> 
        <div ng-show="userLogin.centerCode.$error.required"> 
         Center code is required. 
        </div> 
        <div ng-show="userLogin.centerCode.$error.minlength"> 
         Enter min 3 characters 
        </div> 
        <div ng-show="userLogin.centerCode.$error.maxlength"> 
         Enter max 5 characters 
        </div> 
       </div> 

       <div ng-show=" submitted && userLogin.userID.$dirty && userLogin.userID.$invalid " class="alert alert-danger"> 
        <div ng-show="userLogin.userID.$error.required"> 
         User Id is required. 
        </div> 
        <div ng-show="userLogin.centerCode.$error.maxlength"> 
         Enter Max 20 characters only 
        </div> 
       </div> 

       <alert ng-show="submitted && userLogin.password.$dirty && userLogin.password.$invalid" class="alert alert-danger"> 
        <alert ng-show="userLogin.password.$error.required"> 
         enter password 
        </alert> 

       </alert> 

      </form> 

    <div class="input-element-row"> 
     <div class="forgot-pass"><a href="#/forgotPassword">Forgot password?</a></div> 
    </div> 

</div> 

</div> 
</div> 

Answer 1

ваш input должен выглядеть следующим образом

<input type="text" id="u_id" placeholder="User ID" ng-model="Nuser.userID" name="u_id" value="" maxlength="20" minlength="4" required/>

и вы можете показать предупреждение, как этот

<div ng-show="userLogin.$submitted && userLogin.u_id.$invalid"> 
        User Id is required. 
       </div> 

Bootstrap формы с angularJS проверки:

  <div class="form-group"> 

       <label class="col-sm-2 control-label" for="contactEmail">Email:</label> 

       <div class="col-sm-4 col-sm-push-6"> 
       <div class="alert alert-danger" role="alert" 
         ng-show="contactForm.$submitted && contactForm.contactEmail.$invalid"> 
        <strong><i class="fa fa-exclamation"></i> Error:&nbsp; </strong> 
        <span class="alert-inner">Email is too short.</span> 
       </div> 
       </div> 

       <div class="col-sm-6 col-sm-pull-4"> 
       <input type="email" class="form-control" id="contactEmail" name="contactEmail" 
         placeholder="Ex. johndoe14@gmail.com" 
         maxlength="40" ng-model="contactMessage.email" required> 
       </div> 

      </div>