Угловая форма действительна, когда все входы пусты, почему?

Моя форма отображается как действительная, хотя все мои поля ввода пусты. У меня есть необходимое ключевое слово в полях ввода.

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="/components/angular/angular.min.js"></script>
    <script type="text/javascript" src="/js/app.js"></script>
  </head>

  <body>
    <main>
      <div class="container">
        <div class="row">
          <section ng-controller="LogInController as loginCtrl">
            <form name="signUpForm" action="/createuser" method="POST" novalidate>
              <fieldset>
              <div class="field input-field">
                Email <br />
                <input type="email" name="email" required />
              </div>

              <div class="field input-field">
                Password <br />
                <input type="password" name="password" required />
              </div>

              <div class="field input-field">
                Confirm Password <br />
                <input type="password" name="confirmation" required />
              </div>

              !! -- Form valid? {{signUpForm.$valid}} -- !!

              <div class="actions">
                <input type="submit" value="Sign Up" />
              </div>
              </fieldset>
            </form>
          </section>
        </div>
      </div>
    </main>
  </body>
</html>

Загрузка этого в браузере приводит к !! -- Форма актуальна? истинный -- !! Я думал, что angular знает, что необходимый тег делает пустое поле недействительным?


validation forms angularjs required angularjs-forms
person ErikAGriffin    schedule 09.04.2015    source источник
comment
у вас есть novalidate в форме.   -  person batmaniac7    schedule 09.04.2015
comment
@maddog novalidate необходим, чтобы браузер не выполнял проверку.   -  person Ben Felda    schedule 09.04.2015
comment
@maddog Это просто для того, чтобы избежать всплывающих окон собственной проверки браузера, как это делает Chrome в обязательном поле.   -  person Pankaj Parkar    schedule 09.04.2015

Ответы (1)


arrow_upward
9
arrow_downward

Вы должны поместить ng-model в каждое поле, чтобы включить форму в каждом поле. Если вы не добавите ng-model и name со значением, ваше поле никогда не будет считаться частью вашей формы. И измените одну вещь, создайте одну родительскую переменную, такую ​​​​как form, и добавьте в нее все переменные области видимости. как в контроллере, сделайте $scope.form = {};, а затем в пользовательском интерфейсе добавьте к нему все ng-model, например form.email, form.password и form.confirmation.

Для лучшей проверки формы удалите атрибуты action и method из формы и используйте директиву ng-submit, которая будет вызывать один из методов контроллера. & Сделайте сообщение о вызове из этого метода контроллера, проверив форму $valid или нет.

Разметка

<form name="signUpForm" ng-submit="submit(signUpForm, form)" novalidate>
    <fieldset>
        <div class="field input-field">
            Email
            <br />
            <input type="email" name="email" ng-model="form.email" required />
        </div>

        <div class="field input-field">
            Password
            <br />
            <input type="password" ng-model="form.password" name="password" required />
        </div>

        <div class="field input-field">
            Confirm Password
            <br />
            <input type="password" ng-model="form.confirmation" name="confirmation" required />
        </div>

        !! -- Form valid? {{signUpForm.$valid}} -- !!

        <div class="actions">
            <input type="submit" value="Sign Up" />
        </div>
    </fieldset>
</form>

Контроллер

$scope.submit = function(form, formData) {
    if (form.$valid) { //submit form if it is valid
        $http.post('/url', {
          data: formData
        })
        .success(function() {
          //code here
        })
        .error(function() {
        })
    } else {
        alert("Please fill all required fields")
    }     
}

Надеюсь, это прояснило ваше небольшое представление о форме, спасибо.

person Pankaj Parkar    schedule 09.04.2015
comment
Как вы правильно указали, каждый <input/> должен получить атрибут ng-model, чтобы проверка работала (валидаторы добавляются в модели). Тем не менее, вы удалили эти атрибуты во втором редактировании ответа…? - person ᴠɪɴᴄᴇɴᴛ; 07.04.2017