CODEWITHSUNDEEP
angularangular7
PAA
PAA

Reputation: 12015

Angular 7 - How to disable Save button until Value from Dropdown and field is not populated ? Or all form is not populated?

I already went through disable the button if the input is empty and How Do I disable the button if the input box is empty and enable when field is filled to perform my requirment, but I am using Picklist here. There how can I make sure picklist and fields is not populated ? Until I really don't want to show add button.

<div class="zzz-input">
  <label class="zzz-inputbox-label" for="">
    Patient Role
  </label>
  <div class="input-container">
    <select id="" class="input-box" type="number" aria-required="true" [(ngModel)]="patient.roleTypeId"
      name="roleTypeId">
      <option *ngFor="let patientRole of patientRoles" value="{{patientRole.patientRoleId}}">{{patientRole.patientRoleName}}
      </option>
    </select>
  </div>
</div>

<div class="zzz-input">
  <label class="zzz-inputbox-label" for="">
    Patientnt Name
  </label>
  <div class="input-container">
    <input type="text" id="" class="input-box" aria-required="true" minlength="0" maxlength="100" autocomplete="off"
      width="0" min="" max="" step="" [(ngModel)]="patient.patientId" name="patientId">
  </div>
</div>
<div>
  <button class="zzz-btn zzz-btn-primary" title="Submit" aria-label="Save" (click)="addPatients()">
    Add
  </button>
</div>

Upvotes: 1

Views: 4109

Answers (2)

AVJT82
AVJT82

Reputation: 73367

This is why angular forms exist. I suggest to read the documentation on forms. I further suggest you dig into reactive forms, but here you are using ngModel, so let's make this form template driven. Just wrap your code inside form tags and make fields required. Here we name the form simply f. Then disable the button with !f.valid or if you want to actually hide the button you can use *ngIf="f.valid". So here's a shortened modified code, where we disable the button if the form is not valid:

<form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
  <select [(ngModel)]="patient.roleTypeId" name="roleTypeId" required>
    <! -- .... --->
  </select>
  <input [(ngModel)]="patient.patientId" name="patientId" required>
  <button [disabled]="!f.valid">
    Add
  </button>
</form>

Full code in STACKBLITZ

Upvotes: 1

Todarmal
Todarmal

Reputation: 306

Use this -


  <button class="zzz-btn zzz-btn-primary" title="Submit" aria-label="Save" 
 [disabled]="patient.patientId && patient.roleTypeId" (click)="addPatients()">
    Add
  </button>

Hope it help!

Upvotes: 0

Related Questions