Question

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

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

我已尝试<formname>.ngSubmit.emit()，但未将.submitted设为true。

Answer 1

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

因此，即使您不使用ngSubmit，如果用户点击表单中的提交按钮，表单仍会被“提交”。

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

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

..但根据我使用Angular表单的经验，需要手动设置它是非常不寻常的（ngForm指令和ngSubmit事件发射器应该是管理表单所需的全部内容。你有什么理由需要这个吗？

Answer 2

I'm doing a workaround:

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

Component prop:

submitted: boolean;

.less:

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

Answer 3

要单击表单外部的按钮来提交表单，可以使用相同的方法。创建表单时，将引用变量分配给表单

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

现在，我们可以在整个html中使用此“ formVar” 直接访问表单。对于在表单外部单击按钮提交（使用角形表单的ngSubmit指令），请使用此按钮。

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

Angular 2 - Forms - 通过NgForm对象设置NgForm .submitted为true

3 个答案: