为什么当所有输入为空时，Angular表单是$valid的？

Question

为什么当所有输入为空时，Angular表单是$valid的？

angularjsformsvalidationrequiredangularjs-forms

8

尽管所有输入字段都为空，我的表单仍然显示为有效。我在输入字段中使用了“required”关键字。

<!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>

在浏览器中加载这个内容会得到以下结果：!!——表单是否有效？true——！！我以为Angular知道required标签会使空字段无效？

- ErikAGriffin

1

表单上有 novalidate。 - batmaniac7

3

@maddog 需要使用novalidate来避免浏览器执行自己的验证。 - Ben Felda

1

@maddog 这只是为了避免浏览器自己的验证弹窗，就像 Chrome 在必填字段上所做的那样。 - Pankaj Parkar

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pankaj Parkar · Accepted Answer

你应该在每个字段上放置ng-model以启用表单，除非你添加了值为ng-model和name的属性，否则你的字段将永远不被视为表单的一部分。并且更改一个事项，创建一个父变量，如form，并在其中添加所有作用域变量。例如，在控制器上执行$scope.form = {};，然后在UI上将所有ng-model添加到其中，例如form.email、form.password和form.confirmation。

为了更好地进行表单验证，请从表单中删除action & method属性，并使用ng-submit指令调用一个控制器方法。通过检查表单是否为$valid，从该控制器方法中调用post。标记

<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")
    }     
}

希望这篇文章能够让你更好地理解表单相关的概念，谢谢。