Javascript 角度形式验证已禁用，不工作

我试图在我的表单中使用angular表单验证来发布博客文章，更具体地说，是一个禁用ng的表单。由于种种原因，我无法确定submit按钮没有被禁用，除非所有三个输入字段都有效，否则它应该被禁用。谢谢你的帮助

这是我的博客模板

 <div ng-controller='BlgoCtrl'>
  <div class='container'>
    <h1> Teewinot Blgo</h1>
    <div class="row">
      <div class='col-md-12'>
        <form role='form' name='blgoPost' novalidate>
          <div class='form-group'>
          <label for='blgoTitle'>Title</label>
          <input name='title' type="title" class='form-control'  placeholder='Technologies of the Future' required><br>
          <label for='blgoContent'>Content</label>
          <textarea name='content' rows='8' type="content" class='form-control' placeholder='The technical innovations of the future will be diverse and impactful on the individual......' required></textarea><br>
          <label for='blgoPassCode'>PassCode</label>
          <input name='passcode' type="passcode" class='form-control' placeholder='&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;' required><br>
          <button type="submit" class='btn btn-primary' ng-disabled="blgoPost.$invalid">Submit Post</button>
          </div>
        </form>
      </div>
    </div>

---

表单的每个字段都缺少

ng model

。请记住，当您当时在任何表单字段上提到

ng model

时，

ng model

会在表单名称对象中使用特定的

name

属性创建额外的对象，然后在表单验证时考虑这些属性，如

$error

，

$valid

，

$invalid

，等等

由于表单

name

是

blgoPost

，因此编译此页面时，它会在

blgoPost

的名称范围内内部创建对象。并且在

blgoPost

对象中添加了分配给它们的

name

和

ng model

的所有输入字段。但是如果您没有在表单字段中提到

ng model

，那么它将永远不会添加到

blgoPost

表单对象中

HTML

<form role='form' name='blgoPost' novalidate="">
    <input name="first" />
    <div class='form-group'>
        <label for='blgoTitle'>Title</label>
        <input name='title' type="title" class='form-control' ng-model="test1" placeholder='Technologies of the Future' required="">
        <br>
        <label for='blgoContent'>Content</label>
        <textarea name='content' rows='8' type="content" ng-model="test2" class='form-control' placeholder='The technical innovations of the future will be diverse and impactful on the individual......' required=""></textarea>
        <br>
        <label for='blgoPassCode'>PassCode</label>
        <input name='passcode' type="passcode" ng-model="test3" class='form-control' placeholder='&#8226;&#8226;&#8226' required="" />
        <br/>
        <button type="submit" class='btn btn-primary' ng-disabled="blgoPost.$invalid">Submit Post</button>
    </div>
</form>

标题


内容


密码


投递

---

设置$invalid值的代码在哪里？将模块实例化为

angular.module（'Teewinot'，[]）

。将空数组传递给模块函数。对于每个输入，也使用

ng model

。

angular.module('Teewinot').controller('BlgoCtrl', function($scope, $http) {
  'use strict'
});

<form role='form' name='blgoPost' novalidate="">
    <input name="first" />
    <div class='form-group'>
        <label for='blgoTitle'>Title</label>
        <input name='title' type="title" class='form-control' ng-model="test1" placeholder='Technologies of the Future' required="">
        <br>
        <label for='blgoContent'>Content</label>
        <textarea name='content' rows='8' type="content" ng-model="test2" class='form-control' placeholder='The technical innovations of the future will be diverse and impactful on the individual......' required=""></textarea>
        <br>
        <label for='blgoPassCode'>PassCode</label>
        <input name='passcode' type="passcode" ng-model="test3" class='form-control' placeholder='&#8226;&#8226;&#8226' required="" />
        <br/>
        <button type="submit" class='btn btn-primary' ng-disabled="blgoPost.$invalid">Submit Post</button>
    </div>
</form>