mark mark - 4 years ago 110
AngularJS Question

AngularJS submit button active when all input have a data

I have form with input fields, radio buttons, select boxes. Need submit button make active after when all fields have a data.
example my fields and button.

<div class="form-group" ng-class="{ 'has-error': myForm.birth.$touched && myForm.birth.$invalid }">
<label class="col-sm-3 control-label">{{getWord('Dob')}}<sup>*</sup></label>

<div class="col-sm-6">
<p class="input-group">
<input type="text" placeholder="1988-12-12" class="form-control" name="birth"
uib-datepicker-popup="{{format}}" ng-model="patient.DOB"
is-open="isOpened" datepicker-options="dpOptions"
close-text="Close" alt-input-formats="altInputFormats" required/>

<span class="input-group-btn">
<button type="button" class="btn btn-default"
class="glyphicon glyphicon-calendar"></i>

<p ng-show="myForm.birth.$error.required" style="color:red" ng-if="myForm.birth.$touched">Date of birth is


and code button

<div class="form-group">
<div class="text-center">
<button class="btn btn-labeled btn-success" type="button" ng-click="makeAptmn()">
<span class="btn-label"><i class="glyphicon glyphicon-ok"></i></span>

<button class="btn btn-labeled btn-danger" type="button">
<span class="btn-label"><i class="glyphicon glyphicon-remove"></i></span>


and need same for clear button, clear all input fields.

Answer Source

Just modify your button code as:

<button class="btn btn-labeled btn-success" type="button" ng-click="makeAptmn()"
      <span class="btn-label"><i class="glyphicon glyphicon-ok"></i></span>


I added ng-disabled="myForm.$invalid" which will disable the button when the any of the input field is not valid.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download