AngularJs & Bootstrap3: проверка формы и обязательное поле - PullRequest
Новая
       23

AngularJs & Bootstrap3: проверка формы и обязательное поле

0 голосов
/ 25 июня 2018

Здесь используются angularjs 1.3 и Bootstrap 3.

Я пытаюсь проверить мою форму для обязательного поля.Я добавил html5 «обязательный» атрибут.Я также добавил ng-class, чтобы выделить ошибку, но проблема заключается в том, что форма загружает мое поле ввода, т.е. текстовое поле уже выделено.То, что я ищу, это выделить текстовое поле при нажатии кнопки.Нужно ли вручную проверять это и показывать ошибку?

Я использую следующий код: 

  <div class="m-grid-col-lg-10" 
       ng-class="{ 'has-error': nameForm.userName.$invalid }">
      <input type="text" name="userName" required ng-model="userName"
             class="form-control input-lg input-small" />
  </div>

Нажатие кнопки: 

<button class="btn btn-primary" type="button"
        ng-click="done(nameForm.$valid)">
    Done
</button>

Код контроллера: 

 $scope.done = function (isValid) {
        if (isValid) {
            $modalInstance.close();
        }
        else {
            return false;
        }
    };

Вот jsfiddle:

http://jsfiddle.net/aman1981/a0cLtnpr/7/

1 Ответ

0 голосов
/ 25 июня 2018 
'has-error': nameForm.userName.$invalid && nameForm.userName.$touched

Таким образом, ошибка haspns только в том случае, если она недействительна и затронута, вы также можете сделать или сформировать. $ Submit, если вы хотите активировать отправку, если они даже не коснулись ее.

Обновлено: 

'has-error': nameForm.userName.$invalid && (nameForm.userName.$touched || nameForm.$submitted)
...