5

i have form for selected date. how to disable the submit button if nothing changed in date form?

my html code

<div class="col-xs-6">
   <label><i class="far fa-calendar-alt"></i> Start <span class="text-danger">*</span></label>
     <input id="startTrip1" name="NgbDate" data-provide="datepicker" ngbDatepicker #d="ngbDatepicker" [markDisabled]="markDisabled" [minDate]="minDates" type="text" class="form-control form-flat" [(ngModel)]="ad.start_date" (dateSelect)="onDateSelect($event, ad)" (blur)="validateInput()" (click)="d.toggle()" [ngModelOptions]="{standalone: true}" [disabled]="form.controls.tripduration.hasError('required')" >
      <div class="text-danger" *ngIf="(ad.start_date == '' || ad.start_date == undefined) && ngForm.submitted">
         * This field is required
       </div>
      <div class="text-danger" *ngIf="form.controls.tripduration.hasError('required')">
      * Fill the durations first
      </div>
 </div>
//submit button
<button class="col-xs-12 text-center text-strong pointer custom-trip-btn" (click)="publishTrip()">
<button class="custom-trip-btn">SUBMIT</button>
2
  • Do you only want this when the page is loaded or also when the user changes a value from the original to something else and then back again? Feb 26, 2019 at 8:27
  • when the user changes a value from the original to something else and then back again Feb 26, 2019 at 8:34

3 Answers 3

10

If you used below code, the button only enabled if user changed value in the form

[disabled]="!(accountForm.valid && accountForm.dirty)"

enter image description here

6
<form [formGroup]="profileForm">

  <label>
    First Name:
    <input type="text" formControlName="firstName">
  </label>

  <label>
    Last Name:
    <input type="text" formControlName="lastName">
  </label>

</form>    

<button type="submit" [disabled]="!profileForm.dirty">Submit</button>

Read more about it here

4
  • it work to disable the button. but when i try to edit the date, the button always disabled Feb 26, 2019 at 8:36
  • then try [disabled]="!profileForm.dirty" or [readonly]="!profileForm.dirty" on the input Feb 26, 2019 at 8:38
  • @SoniSilalahi Will you able to share your full form code? Feb 26, 2019 at 9:38
  • 1
    <button type="submit" [disabled]="profileForm.pristine">Submit</button> Try this instead of dirty. Feb 26, 2019 at 12:00
0

Hope this works!

  <label>
    First Name:
    <input type="text" formControlName="firstName">
  </label>

  <label>
    Last Name:
    <input type="text" formControlName="lastName">
  </label>

</form>    

<button [disabled]="!(profileForm.valid ||!profileForm['isDirty']())" 
class="btn btn-primary">Submit</button>

Check some what same question here

Stackblitz-example of some old problem of mine

for the above you need to use RxReactiveFormsModule RxReactive npm

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.