проблема с проверкой angularjs в форме

Question

Я пытаюсь сделать валидацию в форме, которая содержит поле под названием «описание». В этом 1.Описание поля не может быть пустым 2.Описание должно быть не менее 5 символов Поле 3.description не может превышать 60 символов.

Для проверки я сделал, если я ввести 3 описание символов это показывает, как сообщения об ошибках на поле порожняком и поле имеет менее 5 символов. (То же самое происходит при превышении лимита символов)

Как это

как я могу показать правильное сообщение об ошибке, когда это произойдет? Я хочу показать только «Описание слишком короткое/длинное», когда ограничение символа меньше 5 или более 60. И сообщение «Описание требуется», когда описание не включено.

Это то, что я сделал

<!-- DESCRIPTION --> 
     <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && userForm.username.$dirty && submitted || userForm.username.$invalid && userForm.username.$pristine && submitted }"> 
      <label>Description</label> 
      <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="5" ng-maxlength="60" required> 
      <label><p ng-show="userForm.username.$invalid && userForm.username.$dirty && submitted || (userForm.username.$invalid && userForm.username.$pristine) && submitted " class="help-block "><font color="#009ACD">Description is required.</font></p></label> 
      <label><font color="white"><p ng-show="userForm.username.$error.minlength && submitted" class="help-block"><font color="#009ACD">Description is too short.</font></p></label> 
      <label><p ng-show="userForm.username.$error.maxlength && submitted" class="help-block"><font color="#009ACD">Description is too long.</font></p></label> 
     </div> 



      <div class="col"style="text-align: center"> 
      <button align="left"class="button button-block button-reset" type="reset" value="Reset" style="display: inline-block;width:100px;text-align:center " 
      ng-click="submitted=false" padding-top="true">Reset</button> 


      <button class="button button-block button-positive" style="display: inline-block;width:100px " 
      ng-click="submitted=true" type="submit" padding-top="true">Submit</button> 
      </div> 

Answer 1

Вы всегда видите «Описание требуется» сообщение, потому что вы полагаетесь на userForm.username.$invalid собственности, которая будет всегда быть верным, если какие-либо из валидаций неудачи ,

Вместо этого вы должны изменить его, чтобы быть похожим на другие, и использовать ключ userForm.username.$error.required.

Таким образом, ваш первый ярлык становится:

<label><p ng-show="userForm.username.$error.required && userForm.username.$dirty && submitted || (userForm.username.$error.required && userForm.username.$pristine) && submitted" class="help-block "><font color="#009ACD">Description is required.</font></p></label> 

Answer 2

@CrazyDroid вы можете проверить эту ссылку, чтобы иметь подтверждение на вашей форме, которая полностью в соответствие с вашим требованием.

http://scotch.io/tutorials/javascript/angularjs-form-validation

Answer 3

Ваши нг-шоу выражение на с «Описания требуется» выглядит не так со мной. Попробуйте упростить его:

ng-show="submitted && userForm.username.$error.required"