Angular表单submit绑定addContact时required属性不生效问题咨询

我来帮你理清这个问题的核心原因，以及更优雅的解决方式：

为什么原生required校验失效？ #

在Angular中，当你使用[(ngModel)]绑定表单控件时，Angular会接管表单的默认行为。如果你的<form>标签没有明确启用模板驱动表单（即没有添加#formName="ngForm"的模板引用），浏览器的原生表单校验会被Angular拦截，不会触发默认的错误提示，而且表单会直接执行submit绑定的函数——哪怕必填字段是空的。

看你的原始代码，<form>只有name和(submit)绑定，没有关联Angular的ngForm，所以原生的required规则完全没起作用，点击提交就直接跑addContact()了。

正确的解决方式（替代手动校验） #

你不需要自己写isEmpty()这种手动校验逻辑，利用Angular的模板驱动表单就能轻松实现原生校验提示：

步骤1：修改表单模板 #

给<form>添加模板引用变量并绑定到ngForm，同时在提交时传入表单实例：

<form (submit)="addContact(simpleForm)" name="simpleForm" #simpleForm="ngForm">
  <div class="form-group">
    <label>First Name</label>
    <input 
      type="text" 
      [(ngModel)]="first_name" 
      name="first_name" 
      class="form-control" 
      required> <!-- 更规范的写法，直接用required即可 -->
  </div>
  <!-- 其他两个必填字段同理，添加required -->
  <input type="submit" class="btn btn-success" value="Add">
</form>

步骤2：修改addContact函数 #

在函数里判断表单是否有效，无效则触发所有字段的校验提示，有效再执行添加逻辑：

import { NgForm } from '@angular/forms'; // 记得导入NgForm

// ...

addContact(form: NgForm) {
  // 如果表单无效，触发所有字段的校验提示并终止执行
  if (form.invalid) {
    form.control.markAllAsTouched();
    return;
  }

  // 表单有效时，执行原本的添加联系人逻辑
  // ...你的业务代码
}

这样修改后，当必填字段为空时，点击提交会触发浏览器原生的错误提示（比如输入框下方的提示文字），同时不会执行addContact里的业务逻辑，完全替代你的手动校验方案，而且更符合Angular的表单规范。

额外说明 #

• required属性的规范写法是直接写required，required="required"或required="true"虽然也能生效，但没必要多写值。
• 手动校验的isEmpty()虽然能工作，但扩展性差——如果后续字段规则变了（比如加了邮箱格式校验），你还要手动修改函数，而Angular的表单校验会自动处理这些规则。

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