Angular表单中required属性不生效的原因排查

核心原因及解决办法： #

• 缺少Angular表单标识指令
  你用了[(ngModel)]做双向绑定，但form标签没有添加#form="ngForm"指令，Angular无法识别这是一个受控表单，也就不会触发原生的required验证提示。修改form标签：

  <form class="card-body" #form="ngForm">
  

• 点击事件拦截了表单默认提交
  你给submit按钮绑定了(click)="onRegister()"，这个事件会先于表单的默认提交行为执行，直接跳过了浏览器的原生验证流程。解决方法二选一：

  1. 移除按钮的(click)，改用表单的ngSubmit事件绑定：

     <form class="card-body" #form="ngForm" (ngSubmit)="onRegister()">
     <!-- 按钮去掉(click) -->
     <button class="btn btn-primary w-75" type="submit">Register</button>
     

  2. 在onRegister方法里手动触发表单验证：

     // 组件类中先获取表单引用
     @ViewChild('form') form: NgForm;
     
     onRegister() {
       if (this.form.invalid) {
         // 手动触发原生验证提示
         this.form.control.markAllAsTouched();
         return;
       }
       // 后续注册逻辑
     }
     

• 拼写错误影响样式渲染
  所有的form-gorup都是拼写错误，正确的Bootstrap类名是form-group，这个错误会导致表单布局样式异常，甚至可能让浏览器的验证提示无法正常显示位置，赶紧修正所有类名。

修改后的完整模板示例： #

<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" #form="ngForm" (ngSubmit)="onRegister()">
            <div class="form-group">
                <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-group 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-group 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-group 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-group 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">Register</button>
                </div>
                <div class="col-sm-6">
                    <a routerLink="/login">Already registered?</a>
                </div>
            </div>
        </form>
    </div>
</div>

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