如何使用引导程序验证反应性表单？

Question

我的简化代码：

<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>

我不知道是否有太多的括号，或者我是否遗漏了任何类，如表单组。我希望输入得到验证，如这里的https://getbootstrap.com/docs/5.2/forms/validation/#server-side，但是在链接中已经添加了是有效的或无效的类，通常是由引导程序自动添加的。

Answer 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>