Angular 表单验证 $invalid 不起作用答案

【问题标题】：Angular Form Validation $invalid not workingAngular 表单验证 $invalid 不起作用
【发布时间】：2017-07-28 05:00:26
【问题描述】：

当字段为空时，我试图禁用提交按钮。但它不工作。不知道为什么它不起作用。看了很多博客，但不知道是什么问题。

<form name="createForm">
     <div class="form-group col-md-6">
      <label for="createName">Student</label>
      <select class="form-control" name="student" id="createName" ng-
      model="createStudent.studentId" ng-options="item.name for item in 
       allStudent"  required>
      <option value="" selected disabled>Select</option>
    </select>
  </div>
  <div class="form-group col-md-6">
    <label for="createClass">Class</label>
    <select class="form-control" name="class" id="createClass" ng-
     model="createStudent.classId" ng-options="item.number for item in 
     allClass"  required>
      <option value="" selected disabled>Select</option>
    </select>
  </div>
</div>
  <div class="form-group col-md-6 text-md-center">
    <label for="createCategory">Type of Category</label>
    <select class="form-control" name="category" id="createCategory" 
     ng-model="createStudent.type" ng-options="item.category_type for 
      item in allcategoriestypes" required>
      <option value="" selected disabled>Select</option>
    </select>
  </div>
</div>
<div class="row align-items-end justify-content-center">
  <div class="form-group col-md-6 text-md-center">
    <label for="createTeacherName">Teacher Name</label>
    <input type="text" class="form-control" name="teacher" 
     id="createTeacherName" ng-model="createStudent.name" 
     placeholder="Enter Teacher Name" required>
  </div>
</div>
</div>
<div class="text-center pt-1">
<button type="submit" class="btn btn-info px-5" ng-
  click="create(createStudent)" ng-
  disabled="createForm.$invalid">Save</button>
</div>
</form>

【问题讨论】：

请在下面我的回答中检查 plunker
我检查了，在我的项目中它不起作用。
有什么问题？
我正在使用 ng-include 加载表单。我删除了 ng-include 并直接加载了表单，现在它可以工作了。
哦，好的。但我想我的 plunker 正在工作？尽管我的回答有效，但您不接受我的回答。

标签： angularjs forms validation

【解决方案1】：

它工作正常。当字段为空时，它会禁用提交按钮。

<!DOCTYPE html>
<html>

<body>
<form name="createForm">
     <div class="form-group col-md-6">
      <label for="createName">Student</label>
      <select class="form-control" name="student" id="createName" ng-
      model="createStudent.studentId" ng-options="item.name for item in 
       allStudent"  required>
      <option value="" selected disabled>Select</option>
    </select>
  </div>
  <div class="form-group col-md-6">
    <label for="createClass">Class</label>
    <select class="form-control" name="class" id="createClass" ng-
     model="createStudent.classId" ng-options="item.number for item in 
     allClass"  required>
      <option value="" selected disabled>Select</option>
    </select>
  </div>
</div>
  <div class="form-group col-md-6 text-md-center">
    <label for="createCategory">Type of Category</label>
    <select class="form-control" name="category" id="createCategory" 
     ng-model="createStudent.type" ng-options="item.category_type for 
      item in allcategoriestypes" required>
      <option value="" selected disabled>Select</option>
    </select>
  </div>
</div>
<div class="row align-items-end justify-content-center">
  <div class="form-group col-md-6 text-md-center">
    <label for="createTeacherName">Teacher Name</label>
    <input type="text" class="form-control" name="teacher" 
     id="createTeacherName" ng-model="createStudent.name" 
     placeholder="Enter Teacher Name" required>
  </div>
</div>
</div>
<div class="text-center pt-1">
<button type="submit" class="btn btn-info px-5" ng-
  click="create(createStudent)" ng-
  disabled="createForm.$invalid">Save</button>
</div>
</form>
</body>

</html>

【讨论】：

没有。不知道为什么它不起作用。在其他页面它的工作。
当我像 {{createForm}} 这样添加表单名称时，它是未定义的。
我发现了问题，加载我使用 ng-include 的表单。当我删除 ng-include 并直接加载表单时，它的工作原理。

【解决方案2】：

请为您的代码找到有效的插件：

http://plnkr.co/edit/H1LOahFNWRXYHWTVmrcW?p=preview

 <form name="createForm">
     <div class="form-group col-md-6">
      <label for="createName">Student</label>
      <select class="form-control" name="student" id="createName" ng-
      model="createStudent.studentId"  required>
       <option value="studentValue">Student Name</option>
    </select>
  </div><br/>
  <div class="form-group col-md-6">
    <label for="createClass">Class</label>
    <select class="form-control" name="class" id="createClass" ng-
     model="createStudent.classId"  required>
       <option value="classValue">Class</option>
    </select>
  </div><br/>
  <div class="form-group col-md-6 text-md-center">
    <label for="createCategory">Type of Category</label>
    <select class="form-control" name="category" id="createCategory" 
     ng-model="createStudent.type" required>
      <option value="typeValue">Category</option>
    </select>
  </div><br/>
<div class="row align-items-end justify-content-center">
  <div class="form-group col-md-6 text-md-center">
    <label for="createTeacherName">Teacher Name</label>
    <input type="text" class="form-control" name="teacher" 
     id="createTeacherName" ng-model="createStudent.name" 
     placeholder="Enter Teacher Name" required>
  </div>
</div><br/>
<div class="text-center pt-1">
<label>Value returned for $invalid :: {{createForm.$invalid}}</label><br/><br/>
<button type="submit" class="btn btn-info px-5" ng-click="create(createStudent)" ng-disabled="createForm.$invalid">Save</button>
</div>
</form>

确保您的所有标签都正确关闭，并且您的所有字段都不是空的。

【讨论】：