ANGULAR - Disable submit button if form value not changed

Question

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>

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? — Markus Deibel, Feb 26 '19 at 08:27
when the user changes a value from the original to something else and then back again — Soni Silalahi, Feb 26 '19 at 08:34

score 11 · Answer 1 · answered Aug 31 '20 at 12:15

11

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

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

answered Aug 31 '20 at 12:15

lahiru dilshan

690
9
13

score 6 · Answer 2 · answered Feb 26 '19 at 08:29

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

answered Feb 26 '19 at 08:29

Himanshu Bansal

2,003
1
23
46

it work to disable the button. but when i try to edit the date, the button always disabled – Soni Silalahi Feb 26 '19 at 08:36
then try [disabled]="!profileForm.dirty" or [readonly]="!profileForm.dirty" on the input – Florent Arlandis Feb 26 '19 at 08:38
@SoniSilalahi Will you able to share your full form code? – Himanshu Bansal Feb 26 '19 at 09:38
1

Submit Try this instead of dirty. – Mohan Singh Feb 26 '19 at 12:00

score 0 · Answer 3 · answered Feb 26 '19 at 09:28

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

ANGULAR - Disable submit button if form value not changed

3 Answers3