Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular Form Validation $invalid not working

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>
like image 873
Nagesh Avatar asked Jan 02 '26 02:01

Nagesh


1 Answers

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>
like image 60
Balasubramanian Avatar answered Jan 04 '26 14:01

Balasubramanian



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!