angular - ngSubmit.emit() 不会改变 formGroup 的提交属性

标签 angular forms angular-forms

我有两个表单,它们在提交时触发验证,然后才显示给用户。但是,我需要同时在两个表单上触发此提交,以便显示需要填写的字段。

现在我有类似的东西

<form [formGroup]="formGroup" #myForm="ngForm" ngForm (ngSubmit)="onSubmit()" *ngIf="formAssemblyCompleted; else loader>
...
</form>

<form [formGroup]="form2" class="mb-5">
</form>

<button class="btn btn_orange" type="submit (click)="myForm.ngSubmit.emit(true)">
    Submit
</button>

并在组件中
@ViewChild('myForm') myForm: NgForm;

绑定(bind)到 ngSubmit 的函数被正常调用,但是 submitted属性(property)在 myForm不会将其状态更改为 true

最佳答案

这个问题很久以前就完成了,但我有答案。 myForm.ngSubmit.emit(true)只会触发 EventEmitter 来调用传递给 (ngSubmit)="onSubmit()" 的函数.查看代码,我注意到该函数变成了 submitted正确的是 onSubmit($event) .它还会发出 ngSubmit .这是代码的摘录。

onSubmit($event: Event): boolean {
    (this as {submitted: boolean}).submitted = true;
    syncPendingControls(this.form, this._directives);
    this.ngSubmit.emit($event);
    return false;
  }
https://github.com/angular/angular/blob/9.1.11/packages/forms/src/directives/ng_form.ts#L288-L301
所以在你的情况下,你需要这样做:
<button class="btn btn_orange" type="submit (click)="myForm.onSubmit($event)">
    Submit
</button>

关于angular - ngSubmit.emit() 不会改变 formGroup 的提交属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55275797/

相关文章:

angular - 为单个路由渲染多个组件?

css - 将 SASS 变量设置为 CSS3 变量会导致 Bootstrap 4 出错

angular - 在 Angular 2 的 rxjs 中使用 switchMap 运算符时,我们是否必须取消订阅?

forms - 监听嵌套表单组的表单控件内部的更改

Angular 表单验证 - 如何包含来自 ng-template 的输入?

javascript - Angular - 根据参数值应用类

forms - 以 PDF 形式直观地识别字段名称

javascript - 使用 jQuery 设置要检查的单选框

angular - 使用默认值重置表单

php - Zend2 Form - 将属性设置为选择元素中的选项