javascript - Angular 响应式表单提交事件

标签 javascript angular form-submit angular-reactive-forms

我构建了一个效果很好的验证组件。但是,我想通过在成功提交表单时添加成功消息来扩展它。

在我传入表单的组件中,观察变化,并对错误采取行动:

this.formGroup.valueChanges.pipe(takeUntil(this.ngUnsubscribe)).subscribe(data => {
    if (this.formGroup.invalid) {
        this.validation = { message: `Check for errors in the form`, valid: false };
    } else {
        this.validation = { message: '', valid: true };
    }
});

但是我看不到将提交事件放入我的组件以便我可以在 ui 中显示成功的直接方法。

  1. 我可以使用 (ngSubmit) 吗? event不知何故?
  2. 你会怎么做才能得到它?

更新:

  1. 在投入大量时间后,我的 feature request is here

  2. 写了关于 "success handling" on Medium

  3. (2022) 我们终于有了 ng-submitted 类 (v12.1)

最佳答案

我不知道直接来自 FormGroup 类的任何提交事件,我所知道的是您应该从表单模板中收听它。

<form [formGroup]="formGroup" (ngSubmit)="submit()">
  <!-- Your controls here-->
  <button>Submit</button>
</form>

在您的组件代码中,您应该监听创建 submit() 方法的提交事件

关于javascript - Angular 响应式表单提交事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54678936/

相关文章:

asp.net-mvc - 在表单提交时传递整个模型

javascript - jQuery 查找最高父 TD

javascript - 表单数据不会使用 onChange() 绑定(bind)到 React 组件

angular - 如何将动态添加的自定义组件注册为表单组中的表单控件

javascript - 为什么我的 Socket.io 事件会多次触发?

Jquery显示和隐藏导致表单提交

javascript - Protractor 没有运行 cucumber 的功能文件

javascript - 我怎样才能制作图像以便我可以单击它并播放声音

javascript - ngrx - 一旦分派(dispatch)的操作成功更新商店,如何执行操作?

angular - 如何解决 angular 8 中 Observable 中的捕获错误?