Angularjs 当所有输入都为空时，角度形式是有效的，为什么？_Angularjs_Forms_Validation_Required_Angularjs Forms

Angularjs 当所有输入都为空时，角度形式是有效的，为什么？

angularjs forms validation

Angularjs 当所有输入都为空时，角度形式是有效的，为什么？,angularjs,forms,validation,required,angularjs-forms,Angularjs,Forms,Validation,Required,Angularjs Forms,我的表单显示为有效，即使我的所有输入字段都为空。我在输入字段中有必需的关键字 <!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="ht

我的表单显示为有效，即使我的所有输入字段都为空。我在输入字段中有必需的关键字

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


电子邮件

密码

确认密码

!! -- 表格有效吗？{{signUpForm.$valid}}--！！

在浏览器中加载此文件将导致！！--表格有效吗？真的——！！

我想angular知道必需的标记会使空白字段无效？

您应该在每个字段上放置

ng model

，以便在每个字段上启用表单，除非您添加带有值的

ng model

name

，否则您的字段将永远不会被视为表单的一部分。并更改一件事创建一个父变量，例如

表单

&在其中添加所有范围变量。类似于控制器do

$scope.form={}&然后在UI上添加所有ng型号
s，如form.email
，form.password
&form.confirmation

为了更好地进行表单验证，请从表单中删除操作
和方法
属性，并使用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>

希望这已经澄清了你对形式的小概念，谢谢
 表单上有novalidate
。@maddognovalidate
是必需的，所以浏览器不会执行它的验证。@maddog只是为了避免浏览器自己的验证弹出窗口，就像chrome在必填字段上做的那样。正确声明时，每个
都应该获得一个ng model属性，以便验证工作（验证程序被添加到模型中）。但是您在第二次编辑答案时删除了这些属性…？
$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")
    }     
}