Angular表单验证怎么在提交时才触发错误提示？

一苗🍀 提问于 2026-03-26 13:54:20 阅读 23

框架

我在用Angular做注册表单，现在一进页面就显示必填错误，用户体验很不好。明明用户还没操作过，为啥验证这么急？

我试过把updateOn设成’submit’，但好像没生效。是不是哪里写错了？下面是我的React代码（别笑，项目里混用了）：

const LoginForm = () => {
  const [email, setEmail] = useState('');
  const isValid = email.includes('@');
  
  return (
    <form onSubmit={(e) => e.preventDefault()}>
      <input 
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="邮箱"
      />
      {!isValid && <span>请输入有效邮箱</span>}
      <button type="submit">登录</button>
    </form>
  );
};

Angular这边是用的Reactive Forms，想做到跟上面React逻辑一样：只在提交后才校验并显示错误。

我来解答赞 5 收藏

反馈

1 条解答

轩辕雅涵 Lv1

在Angular里实现表单提交时才验证错误，主要用到Reactive Forms的配置选项。你提到的updateOn确实能解决问题，不过我们得正确配置才行。

首先创建表单组的时候，要指定updateOn为'submit'。这里需要注意，这个设置必须在初始化FormGroup时就做好，不能事后修改。下面给你一个完整的示例代码：

import { Component, OnInit } from '@angular/core';

import { FormBuilder, FormGroup, Validators } from '@angular/forms';



@Component({

  selector: 'app-register',

  template: 

    <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">

      <input formControlName="email" placeholder="邮箱">

      <div *ngIf="registerForm.get('email').invalid && registerForm.get('email').touched">

        请输入有效邮箱

      </div>

      <button type="submit">注册</button>

    </form>

  

})

export class RegisterComponent implements OnInit {

  registerForm: FormGroup;



  constructor(private fb: FormBuilder) {}



  ngOnInit() {

    // 这里是关键，注意第三参数

    this.registerForm = this.fb.group({

      email: ['', {

        validators: [Validators.required, Validators.email],

        updateOn: 'submit' // 只有提交时才触发验证

      }]

    });

  }



  onSubmit() {

    if (this.registerForm.valid) {

      console.log('表单数据', this.registerForm.value);

    }

  }

}

看到没？重点就在那个updateOn:'submit'上。原理其实很简单：默认情况下，Angular会在输入改变时就进行验证（叫valueChanges），但通过设置updateOn，我们可以控制什么时候更新表单状态。

另外，注意到模板里的条件判断了吗？我们只在表单控件无效且已触碰时才显示错误提示。这里用到了touched属性而不是直接判断invalid，这样可以确保用户真正操作过之后才提示。

顺便说下，你的React代码里虽然实现了类似逻辑，但没有使用框架自带的表单机制。如果你以后全换成Angular，建议都用这套Reactive Forms来管理表单，会省很多事。

对了，别忘了导入相关模块：ReactiveFormsModule一定要在app.module.ts里引入，这经常被新手忽略。累死我了，打字好麻烦啊...

2026-03-26 14:00