Angular Form Validation $invalid not working

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>

I was loading the form using ng-include. I removed the ng-include and loaded the form directly, now its working. — Nagesh
– Nagesh, Commented Jul 28, 2017 at 10:29
oh ok. but i guess my plunker was working ? you unaccepted my answer though it was working. — Deepa
– Deepa, Commented Jul 28, 2017 at 10:31

Balasubramanian · Accepted Answer · 2017-07-28 05:07:55Z

2

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>

answered Jul 28, 2017 at 5:07

Balasubramanian

7188 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nagesh Over a year ago

No. Don't know why its not working. In other page its working.

Nagesh Over a year ago

When I add form name like this {{createForm}}, its undefined.

Nagesh Over a year ago

I figure out the issue, to the load the form I had used ng-include. When I remove the ng-include and load the form directly its working.

Deepa · Accepted Answer · 2017-07-28 05:32:11Z

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.

cs.kali · Accepted Answer · 2024-09-10 13:00:03Z

0

I know this is an old post and you might have got your answer, but I just stumbled upon this issue myself. In my case I'd initialized the model properties assigned to the form's fields with empty objects thus they were not considered empty. Once I removed those initializations from my controller, the form stared behaving as expected.

answered Sep 10, 2024 at 13:00

cs.kali

3082 silver badges16 bronze badges

Collectives™ on Stack Overflow

Angular Form Validation $invalid not working

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related