Angular 2 - 表单 - 通过 NgForm 对象将 NgForm.submitted 设置为 true

Question

在Angular 1（1.5）中，表单控制器有一个$setSubmitted()方法，允许您以编程方式将.$submitted标志设置为true。

在2中，通过NgForm对象如何实现此操作？我不想使用模板，即(ngSubmit)=""。

我尝试了<formname>.ngSubmit.emit()，但它没有将.submitted设置为true。

- mrshickadance

---

不是直接的答案 - 但可能会引导人们来到这个问题。我发现了一个超级混乱的竞态条件。在提交期间，我设置[disabled]=true来隐藏一个<button>对象（这样你就不能点击它两次）。然而，如果我在提交按钮的(click)处理程序中将其设置为禁用（通过@Input属性完成），那么就会停止设置.submitted。有各种可能的解决方案（比如在表单上使用onsubmit而不是在按钮上使用click）- 但是这让我困惑了一段时间。 - Simon_Weaver

Answer 1

ngSubmit实际上是一个事件发射器（一个@Output()绑定），它将在表单提交后通知您，通过监听主机表单元素上的提交DOM事件来实现这一点。

因此，即使您不使用ngSubmit，如果用户在表单内单击提交按钮，表单仍将被“提交”。

您可以使用onSubmit方法手动将表单提交标志设置为true，例如通过按钮。

<button type="button" (click)="theForm.onSubmit($event)">Submit</button>

.. 但根据我的使用经验，对于 Angular 表单而言，手动设置这个值相当不寻常（ngForm指令和 ngSubmit事件发射器应该已足够管理表单）。您需要手动设置的原因是什么呢？

- Garth Mason

---

我有同样的问题。我需要通过ngSubmit.emit()提交表单，因为按钮在父组件中，不在表单内部。我需要将提交标志设置为true，因为我在验证消息逻辑中使用它。 - AntonK

我通过调用onSubmit()方法，而非ngSubmit.emit()方法来解决了这个问题。 - AntonK

类似AntonK的情况。为了避免冗长的解释，我无法控制触发提交的模板或按钮，因此我需要在JS代码中完成它。 - mrshickadance

和@AntonK一样的情况，但我也没有找到将“submitted”属性设置为true的解决方案... - axel

我使用了这种技术，因为我有一个带有字体图标的<i>标签，它将成为提交的原因，并且需要像提交按钮一样起作用。效果非常好！ - Paul Speranza

Answer 2

为了在表单外部的按钮点击时提交表单，可以使用相同的方法。 在创建表单时，将一个引用变量分配给表单。

<form name = "myform" (ngSubmit)= "SubmitForm()" #formVar = "ngForm">.....</form>

现在我们可以在整个html中使用这个"formVar"直接访问表单。 要在表单外部的按钮点击时提交表单（使用angular表单的ngSubmit指令），请使用此方法。

<button (click)= "formVar.onSubmit($event)"> Submit </button>

- himanshu goyal

Answer 3

我正在做一个解决方法：

 <form #form="ngForm" [formGroup]='toiletForm' [class.submitted]='submitted'></form>

组件属性：

submitted: boolean;

.less:

form.submitted input.ng-invalid {
    border: solid 2px #fa787e !important;
}

- Snusmumriken