AngularJS 当所有输入都有数据时，提交按钮激活

Question

我有带有输入字段、单选按钮、select 框的表单。当所有字段都有数据时，需要提交按钮激活。例如我的字段和按钮。

<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"
                   data-placeholder=""
                   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"
                        ng-click="openCalender()"><i
                    class="glyphicon glyphicon-calendar"></i>
                </button>
            </span>

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

        </p>
    </div>
</div>

和代码按钮

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

            {{getWord('makebutton')}}
        </button>
        <button class="btn btn-labeled btn-danger" type="button">
            <span class="btn-label"><i class="glyphicon glyphicon-remove"></i></span>

            {{getWord('clearbutton')}}
        </button>
    </div>
</div>

清除按钮也需要相同的按钮，清除所有输入字段。

Answer 1

只需将您的按钮代码修改为：

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

      {{getWord('makebutton')}}
</button>

我添加了 ng-disabled="myForm.$invalid"，它将在任何输入字段无效时禁用该按钮。

AngularJS 当所有输入都有数据时，提交按钮激活

AngularJS submit button active when all input have a data

angularjs

validation

submit

form-submit

bootstrapvalidator