Angular 角度-以编程方式提交表单

角度-以编程方式提交表单

我在HTML上有一个表单组，我希望组件通过post方法中的电子邮件字段提交表单的操作。而不是使用普通的提交按钮

下面的testMethod从另一个按钮调用。在这个方法中，我想发布testForm。它必须以老式的方式发布，因为它需要一个动作

这是我的HTML:

  <form
    [formGroup]="testGroup"
    [action]='actionLink'
    method='POST'
    #testForm>
     <input name='Email' type='hidden' [value]='currentUserEmail'>
  </form>

  @ViewChild('testForm') testFormElement;

  public currentUserEmail: string = '';
  public testGroup = this.formBuilder.group({
    Email: ''
  });


  public testMethod(): void {

      // Below: This currently doesnt seem to do anything.
      this.testFormElement.ngSubmit.emit();
  }

从'@angular/core'导入{Component，ViewChild}；
@组成部分({
模板：`
`
})
类MyComponent{
@ViewChild（'testForm'）testFormEl；
testMethod（）{
this.testFormEl.nativeElement.submit（）文件
}
}

您可以在表单中使用

ngNoForm

来删除

ngForm

处理并添加普通javascript处理程序

您可以按如下方式使用代码：

Html文件

Ts文件

@ViewChild（'testForm'）testFormElement；
public currentUserEmail:string=''；
public testGroup=this.formBuilder.group({
电子邮件：“”
});
构造函数（formBuilder:formBuilder）{
}    
publictestmethod（）：void{
this.testFormElement.nativeElement.submit（）；
}

关于“角度-以编程方式提交表单” 下面是表单提交自身的代码。它对我有用。希望这有帮助

组件HTML：

组件类型脚本：

@ViewChild（'myForm'）myForm:ElementRef；
ngAfterViewInit（）{
this.myForm.nativeElement.submit（）；
}

我认为您应该在代码中加入ngForm。因此，请按如下方式重写代码：

在ts文件中：

@ViewChild（'testForm'）testFormElement:NgForm；
publictestmethod（）：void{
//下面：这对我很有用。
this.testFormElement.ngSubmit.emit（）；
}
public yoursavethod（）：void{
//在这里张贴您的模型。
}

我找到了一个很好的解决方案

它将作为true提交

我们现在的做法是：

HTML:

ts:

@ViewChild（'myForm'）ngForm:ngForm；
...
公共onSubmit（）{
this.ngForm.onSubmit（未定义）；//它将作为true提交

我已经添加了我在问题中遇到的错误。您的解决方案不起作用。我尝试了此代码，但响应了一个错误，即nativeElement未定义。core.js:14597错误类型错误：无法读取UndefinedElement的属性“nativeElement”。请告诉我们在控制台中看到错误的原因是什么？具体发生了什么当您单击并按下按钮（当您调用

testMethod（）

）时，ThanksIt看起来像是this.testFormEl.nativeElement.submit（）我什么也没做。我在网络上看不到帖子traffic@MohamedAliRACHID我已经添加了我当前的尝试above@AngularM你解决了这个问题吗？这对我很有效。如果你真的想模拟提交，你还应该发出你的值

this.testFormElement.ngSubmit.emit（this.testGroup.values）；

很好的解决方法！与onPush一起工作