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

3 回答

• 3

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

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

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

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

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

  回复于 2024-04-29T14:58:42+08:00
• 1

  要点击表格之外的按钮提交表格，可以使用相同的方法。创建表单时，为表单分配一个 Reference 变量

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

  现在我们可以在整个 html 中使用这个**“formVar”**来直接访问表单。对于提交单击窗体外的按钮(使用角形的 ngSubmit 指令)，请使用此。

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

  回复于 2024-04-29T14:58:42+08:00
• 0

  我正在做一个解决方法：

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

  组件道具：

  submitted: boolean;
  

  .less：

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

  回复于 2024-04-29T14:58:42+08:00