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

Question

如果輸入為空 ， 我已經禁用了該按鈕，如果輸入框為空，我如何禁用該按鈕 ， 如何在填充字段以執行我的要求時啟用該按鈕 ，但是我在這里使用的是Picklist。 我該如何確保未填充選擇列表和字段？ 直到我真的不想顯示添加按鈕。

<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

這就是為什么存在角形的原因。 我建議閱讀表格上的文檔 。 我進一步建議您深入研究響應式表單，但是這里您使用的是ngModel，因此讓我們將此表單模板驅動。 只需將您的代碼包裝在表單標簽中，然后將字段設為必填即可。 在這里，我們將形式簡單地命名為f 。 然后使用!f.valid禁用按鈕，或者如果您想真正隱藏按鈕，則可以使用*ngIf="f.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>

STACKBLITZ中的完整代碼

Answer 2

用這個 -

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

希望對您有所幫助！