为什么“必需”在我的 Angular 表单中不起作用？

Question

我对角度很陌生。下面是我的角度注册页面的模板文件。我已经在表单标签内添加了所有标签和输入。我有一个名为 Register 的提交按钮。为什么在单击注册时不显示所需的默认行为？我使用引导程序进行样式设置。

 <div class="register-page">
        <div class="card register-form-box shadow-lg p-3 mb-5 bg-white rounded">
            <div class="card-header">
                <h4>Register</h4>
            </div>
            <form class="card-body">
                <div class="form-gorup">
                    <label class="fw-bold" for="username">Username</label>
                    <input class="form-control" id="username" type="text" [(ngModel)]="userName" name="username" required>
                </div>
                <div class="form-gorup mt-3">
                    <label class="fw-bold" for="email">Email</label>
                    <input class="form-control" id="email" type="email" [(ngModel)]="email" name="email" required>
                </div>
                <div class="form-gorup mt-3">
                    <label class="fw-bold" for="inpname">Infrastructure Provider Name</label>
                    <input class="form-control" id="inpname" type="text" [(ngModel)]="inpName" name="inpname" required>
                </div>
                <div class="form-gorup mt-3">
                    <label class="fw-bold" for="password">Password</label>
                    <input class="form-control" id="password" type="password" [(ngModel)]="password" name="password" required>
                </div>
                <div class="form-gorup mt-3">
                    <label class="fw-bold" for="repassword">Retype Password</label>
                    <input class="form-control" id="repassword" type="password" [(ngModel)]="rePassword" name="repassword" required>
                </div>
                <div class="mt-4 row">
                    <div class="col-sm-6">
                        <button class="btn btn-primary w-75" type="submit" (click)="onRegister()">Register</button>
                    </div>
                    <div class="col-sm-6">
                        <a routerLink="/login">Already registered?</a>
                    </div>
                </div>
            </form>
        </div>
    </div>

Answer 1

由于 required 属性，您的表单控件很可能被正确标记为无效，但您的 HTML/CSS 中没有任何内容被触发以响应无效状态。

查看the Angular docs 了解如何在模板驱动的表单上实现验证。

您的用例的示例可能是：

<div class="form-gorup">
  <label
    class="fw-bold"
    for="username">
    Username
  </label>

  <input
   class="form-control"
   id="username"
   type="text"
   #UserName="ngModel"
   [(ngModel)]="userName"
   name="username"
   required />

  <p
    *ngIf="UserName.errors?.['required']"
    class="your-form-error-style">
    Username is required
  </p>
</div>