stackoom
  简体   繁体   中英

Angular Form Validation $invalid not working

 原文  2017-07-28 05:00:26  2   2    angularjs/ forms/ validation

Question

I was trying to disable the submit button, when the fields are empty. But its not working. Don't know why its not working. Saw many blogs, but could't figure whats the issue. 

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

2 answers

solution1
 2  2017-07-28 05:07:55

it is working fine.it disable the submit button, when the fields are empty. 

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

solution2
 1 ACCPTED  2017-07-28 05:32:11

Please find the working plunker for your code :

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>

Make sure all your tags are properly closed and none of your fields are empty.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Angular validation on form not working Angular form validation is not working form validation not working in angular angular form validation not working Angular form validation not working Angular form validation - $invalid attribut in angular basic angular form validation not working Angular support for form validation not working Angular form validation not working properly Angular JS form validation is not working
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM