CODEWITHSUNDEEP
angular
Rakshanda Bhure
Rakshanda Bhure

Reputation: 35

enabling update button only when new data is entered, and disabling till then, Angular

when edit button is pressed,there is a pop up and the user is allowed to make changes in two input fields, these input fields display the pre saved values values, for eg

input1- 5 input2- 6 update button

the user should not be allowed to press update button unless he makes changes in prexisting input 1 and input 2 names.

what kind of validation would i need for this?

html update pop up

  <ng-template #template>
    <div class="modal-body text-center">
      <form [formGroup]="updateForm">
        <table class="table borderless">
          <thead>
            <tr>
              <th></th>
              <th >1</th>
              <th >2</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>num</th>
              <td>
                <div class="form-group">
                  <input
                    type="number"
                    min="0"
                    formControlName="firstNum"
                    class="form-control input-sm "/>
                  </div>
                </div>
              </td>
              <td>
                <div class="form-group">
                  <input
                    formControlName="secondNum"
                    class="form-control input-sm"
                    type="number"
                    min="0"/>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <div style="text-align: center;" class="form-group">
          <button
            [disabled]="loading"(click)="
              updateVisitType(
              firstNum, secondNum)">
            Update
          </button>
        </div>
      </form>
    </div>
  </ng-template>

Upvotes: 0

Views: 32

Answers (1)

ChaitraLokesh
ChaitraLokesh

Reputation: 11

You could use ngOnChanges life cycle hook to compare prev and current value to enable/disable update button. For more information: https://angular.io/api/core/OnChanges

Upvotes: 1

Related Questions