Question

当字段为空时，我试图禁用提交按钮。但它不起作用。不知道为什么它不起作用。看到很多博客，但无法解决这个问题。

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

Answer 1

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

＆＃13;

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

＆＃13;

Answer 2

请为您的代码找到工作的plunker：

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>

确保所有标记都已正确关闭且没有任何字段为空。

Angular Form Validation $无效

2 个答案: