Angular 7-如何禁用“保存”按钮，直到未填充“下拉列表中的值”和字段？ 还是没有填写所有表格？

Question

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>

Answer 1

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

Answer 2

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!