AngularJS表单验证和提交

代码笔链接：

需要创建一个angular应用程序（带1个控制器），用于验证此表单是否已填写所有三个字段&只有在表单有效的情况下，才能启用“提交”按钮。不需要使用预处理器

<div class="container" ng-app="myApp" ng-controller="formCtrl">

  <h1><span><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/angular-logo.svg" alt="Angular.js Logo" /></span> Angular.js - Web Form</h1>

  <form role="form" name="form" id="contact-form">
    <div class="form-group">
      <label for="FirstName">First name</label>
      <input type="text" class="form-control" name="FirstName" id="FirstName" placeholder="enter first name" ng-model="firstName">
    </div>

    <div class="form-group">
      <label for="LastName">Last Name</label>
      <input type="text" class="form-control" name="LastName" id="LastName" placeholder="enter last name" ng-model="lastName">
    </div>

    <div class="form-group">
      <label for="EmailAddress">Email address</label>
      <input type="email" class="form-control" id="EmailAddress" name="EmailAddress" placeholder="enter email" ng-model="emailAddress" ng-model-options="{ updateOn: 'blur' }">
    </div>

    <div class="checkbox">
      <label>
        <input type="checkbox" required> Check me out
      </label>
    </div>

    <button type="submit" class="btn btn-default" ng-model="submitButton">Submit</button>

  </form>

</div>

Angular.js-Web表单
名字
姓
电子邮件地址
看看我
提交

添加所需的验证

 <div class="container" ng-app="myApp" ng-controller="formCtrl">

  <h1><span><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/angular-logo.svg" alt="Angular.js Logo" /></span> Angular.js - Web Form</h1>

  <form role="form" name="myForm" id="contact-form">
    <div class="form-group">
      <label for="FirstName">First name</label>
      <input type="text" class="form-control" name="FirstName" id="FirstName" placeholder="enter first name" ng-model="firstName" required>
    </div>

    <div class="form-group">
      <label for="LastName">Last Name</label>
      <input type="text" class="form-control" name="LastName" id="LastName" placeholder="enter last name" ng-model="lastName" required >
    </div>

    <div class="form-group">
      <label for="EmailAddress">Email address</label>
      <input type="email" class="form-control" id="EmailAddress" name="EmailAddress" placeholder="enter email" ng-model="emailAddress" ng-model-options="{ updateOn: 'blur' }" required>
    </div>

    <div class="checkbox">
      <label>
        <input type="checkbox" required> Check me out
      </label>
    </div>

    <button type="submit" class="btn btn-default" ng-model="submitButton" data-ng-disabled="myForm.$invalid" >Submit</button>

  </form>

</div>

Angular.js-Web表单
名字
姓
电子邮件地址
看看我
提交

---

这是您编辑的

实际上是模块注入问题

ng app=“myApp”ng controller=“formCtrl”

您的

myApp

模块代码在哪里

像这样试试

<div class="container" ng-app>

  <h1><span><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/angular-logo.svg" alt="Angular.js Logo" /></span> Angular.js - Web Form</h1>

  <form role="form" name="form" id="contact-form" novalidate>
    <div class="form-group">
      <label for="FirstName">First name</label>
      <input type="text" class="form-control" name="FirstName" id="FirstName" placeholder="enter first name" ng-model="firstName" required>
    </div>

    <div class="form-group">
      <label for="LastName">Last Name</label>
      <input type="text" class="form-control" name="LastName" id="LastName" placeholder="enter last name" ng-model="lastName" required>
    </div>

    <div class="form-group">
      <label for="EmailAddress">Email address</label>
      <input type="email" class="form-control" id="EmailAddress" name="EmailAddress" placeholder="enter email" ng-model="emailAddress" ng-model-options="{ updateOn: 'blur' }" required>
    </div>

    <div class="checkbox">
      <label>
        <input type="checkbox" required> Check me out
      </label>
    </div>


    <button type="submit" class="btn btn-default" ng-disabled="form.$invalid">Submit</button>

  </form>

</div>

Angular.js-Web表单
名字
姓
电子邮件地址
看看我
提交

您是否尝试使用验证？请参阅我的更新答案我对Angular有点陌生，所以不知道如何使用验证。谢谢各位！为什么它是错的@ManikandanVelayutham？似乎适用于meDo F12，然后您可以知道。您好按钮不应单击假设此代码中已包含angular library（1.3.0）如果您还想增强引导错误消息，该怎么办？这似乎可以解决这个问题