如何在TypeScript中设置输入框为必填项？*ngIf控制按钮显示失效排查

你的代码问题主要有两点：

1. 条件判断不完整：当前*ngIf只校验了第一个输入框neueEintragBeschreibung的值，完全没对第二个输入框neuesEintragFaelligkeitsdatum做判断，导致只要第一个输入框有内容，按钮就会显示，不符合两个输入都必填的需求。
2. 未处理空白内容：如果用户在输入框只输入空格，此时value不为空字符串，会被误判为已填写，需要用trim()去除首尾空格来校验有效内容。

修正方案（显示/隐藏按钮） #

调整*ngIf的条件，同时校验两个输入框的有效内容：

<input
    #neueEintragBeschreibung
    placeholder="Eintrag hinzufügen"
    class="lg-text-input"
  />

  <input
    #neuesEintragFaelligkeitsdatum
    placeholder="Faelligkeitsdatum hinzufügen"
    class="lg-text-input"
  />

  <div *ngIf="neueEintragBeschreibung.value.trim() && neuesEintragFaelligkeitsdatum.value.trim()">
    <button class="btn-primary" (click)="addEintrag(neueEintragBeschreibung.value, neuesEintragFaelligkeitsdatum.value)">
      Add
    </button>
  </div>

更友好的替代方案（禁用按钮） #

如果不想让按钮频繁显示/隐藏，建议用disabled属性控制按钮状态，按钮始终可见但只有两个输入都填写完成后才可点击：

<input
    #neueEintragBeschreibung
    placeholder="Eintrag hinzufügen"
    class="lg-text-input"
  />

  <input
    #neuesEintragFaelligkeitsdatum
    placeholder="Faelligkeitsdatum hinzufügen"
    class="lg-text-input"
  />

  <button 
    class="btn-primary" 
    (click)="addEintrag(neueEintragBeschreibung.value, neuesEintragFaelligkeitsdatum.value)"
    [disabled]="!neueEintragBeschreibung.value.trim() || !neuesEintragFaelligkeitsdatum.value.trim()"
  >
    Add
  </button>

内容的提问来源于stack exchange，提问作者user19434217