Disable submit button unless start date is before end date on angular form

Question

So I have this start date field and it will correctly show an error if the start date is after the end date of an event. However, I want to make it so that the form itself won't submit. I do not know how to prevent form submission with custom validation.

  <fieldset ng-controller="ConfigCtrl"  show errors>
    <label>Event Start Date</label><sup class="req-field">*</sup>
    <div class=" input-group" ng-class="{'has-error': event.info.date >= event.info.end_date}">
      <input type="text" name="start-date" class="form-control" datetime-picker="dd MMM yyyy HH:mm" datepicker-append-to-body="true" ng-model="event.info.date" max-val="{{event.info.end_date}}" is-open="isOpen[0]"  date-validator ng-focus="openCalendar(0)" required>
      <span class=" input-group-btn">
        <button class="btn btn-default" type="button" ng-click="openCalendar(0)">
          <i class="fa fa-calendar"></i>
        </button>
      </span>
    </div>
  </fieldset>

This is the code for the submit button:

<button class="btn btn-primary" ng-click="saveEvent(event, 'editBasicInfo');editBasicInfo = !editBasicInfo" ng-disabled="basicInfoForm.$invalid">Submit</button>

If I have a field validate for something like ng-maxlength, the submit button will be disabled. How do I do the same for this custom validation?

Possible duplicate of [how to validate date format in angular](http://stackoverflow.com/questions/30218987/how-to-validate-date-format-in-angular) — Dinesh Devkota, Aug 24 '16 at 17:45
Hi @DineshDevkota. That question deals with date formatting. This has to do with checking if one date comes before another. — tonestrike, Aug 24 '16 at 18:00
You might want to use custom validation like https://rashimuddin.wordpress.com/2014/08/24/date-range-custom-validation-in-angular-js/ for this case. — Dinesh Devkota, Aug 24 '16 at 18:05
Place this date validation logic in a custom validator. https://docs.angularjs.org/guide/forms — Naveed, Aug 24 '16 at 18:07
Although you can place your validation logic in `ng-disabled`: `ng-disabled="basicInfoForm.$invalid && event.info.date >= event.info.end_date"`, the best practice would be to create a custom validator. — Naveed, Aug 24 '16 at 18:10

score 0 · Accepted Answer · answered Aug 24 '16 at 18:59

This was an answer by Naveed. "Although you can place your validation logic in ng-disabled: ng-disabled="basicInfoForm.$invalid && event.info.date >= event.info.end_date", the best practice would be to create a custom validator."

Both @dinesh and @naveed helped me figure this out. Thanks!

Disable submit button unless start date is before end date on angular form

1 Answers1