如何使用 Bootstrap 验证反应形式？答案

【问题标题】：How to validate reactive form using Bootstrap?如何使用 Bootstrap 验证反应形式？
【发布时间】：2022-10-16 09:25:03
【问题描述】：

我的简化代码：

<div class="tab " *ngIf="booking">
 <div class="confirmation-email card" *ngIf="showConfirmationEmailForm" id="confirmationEmail">
   <div class="card-header">
     <span>Some text</span>
   </div>
   <div class="confirmation-email-content">
    <form [formGroup]="emailForm">
      <div class="form-group">
        <label for="email">
           Description
        </label>
        <input type="email"
            id="email"
            formControlName="email"
            class="form-control"
            required minlength="4"
            placeholder="name@example.com">
        <div class="invalid-feedback">Invalid email!</div>
      </div>
      <button type="submit" class="btn btn-secondary btn-sm" (click)="onResendConfirmation()">Resend Confirmation</button>
     </form>
   </div>
  </div>
</div>

我不知道是否有太多的括号，或者我是否缺少像 form-group 这样的类。我希望像这里https://getbootstrap.com/docs/5.2/forms/validation/#server-side一样验证输入但是在链接中已经添加了 is-valid 或 is-invalid 类，通常由 Bootstrap 自动添加。

【问题讨论】：

标签： angular forms validation bootstrap-4

【解决方案1】：

如果要处理服务器端验证，则需要先处理客户端验证。您可以使用以下代码：

<div class="tab " *ngIf="booking">
  <div class="confirmation-email card" *ngIf="showConfirmationEmailForm" id="confirmationEmail">
    <div class="card-header">
      <span>Some text</span>
    </div>
    <div class="confirmation-email-content">
      <form [formGroup]="emailForm" (ngSubmit)="onResendConfirmation(emailForm.value)">
        <div class="form-group">
          <label for="email">
            Description
          </label>
          <input type="email" id="email" formControlName="email" class="form-control" required minlength>
        </div>
      </form>
    </div>
  </div>
</div>

【讨论】：

添加 (ngSubmit)="onResendConfirmation()" 似乎不起作用