Angular2-从外部验证并提交表格

我有一个简单的表单，看起来像这样

<form (ngSubmit)="save()" #documentEditForm="ngForm">
...
</form>

...

并且需要提交表格，并从外部检查其有效性

---

例如，以编程方式提交，或使用

标签之外的

提交。

了解如何执行：

• 使用

  .ngSubmit.emit（）触发提交

• 使用

  .form.valid

例如：

<form (ngSubmit)="save()" #documentEditForm="ngForm">
...
</form>

<button class="btn-save button primary"
(click)="documentEditForm.ngSubmit.emit()"
[disabled]="!documentEditForm.form.valid">SAVE</button>

// html
<form [formGroup]="form" #formRef="ngForm">
    // ...Form Controls
</form>

// component.ts
export class MyComponent {

    @ViewChild('formRef')
    formRef: FormGroupDirective;

    form: FormGroup = new FormGroup({
        myInput: new FormControl(''),
        //etc...
    });

    submitFormProgrammatically() {
        this.formRef.onSubmit(undefined);
    }
}

---

如果您还没有导入

FormGroupDirective

，请不要忘记导入

FormGroupDirective

<form (ngSubmit)="save()" id="ngForm" #documentEditForm="ngForm"> 
    ... 
</form>

<button class="btn-save button primary" form="ngForm" [disabled]="!documentEditForm.form.valid">
    SAVE
</button>


... 
拯救

表单需要有一个ID
ID=“example form”
，提交按钮需要在
form=“example form”
中有一个匹配的ID，这是一个对我有用的技巧


反应形式
角2
包括IE

是这样的：

<!-- real button will simulate click on invisible button (cf. form) -->
<button onclick="document.getElementById('hiddenSaveButtonForMicrosoftWithLove').click()">
  The Real Button outside forms
</button>

<form>
  <!-- will be called in the background and is never visible -->
  <button id="hiddenSaveButtonForMicrosoftWithLove" type="submit" style="display: none;">hiddenSaveButtonForMicrosoftWithLove</button>
</form>


真正的按钮外的形式
隐藏的保存按钮与爱相融合
如果您使用的是被动表单，请使用formGroup invalid属性禁用submit按钮：

<button  
  form="ngForm"
  [disabled]=" editor.invalid>Enviar</button> 

以下解决方案在我的情况下有效，请尝试此简单解决方案。我不确定它是否能在所有条件下工作：

<form #documentEditForm="ngForm" id="ngForm" (ngSubmit)="save(documentEditForm.valid)"> 
    ...Your Input Elements... 
</form>

希望这个简单的解决方案能对您有所帮助。
重要提示：如果使用角度材质窗体控件+反应窗体
调用
onSubmit（未定义）
在
[formGroup]
指令上正确设置
submited=true

注：指令与角度形式本身不是同一对象（详见下文）

这是部分原因。（对于反应形式）

您可以这样使用它：

<button form="ngForm">Submit</button>

<form [formGroup]="form" #formRef="ngForm">

this.formRef.onSubmit(undefined)


注意：当您创建
标记时，是否自动应用另一个指令
令人困惑的注意事项：
NgForm
和
FormGroupDirective
在其源代码中都有
exportAs:'NgForm'
（它们还都声明
submited
和
ngSubmit
属性）。但是当我放入
#ngForm='ngForm'
时，我得到的对象类型是
FormGroupDirective
，而不是
ngForm
（在调试器中验证）。我不确定确切的原因-但这就是为什么我宣布它为
FormGroupDirective
，而不是
NgForm
-我想可能是第一个赢了

您可以这样使用它：

<button form="ngForm">Submit</button>

<form [formGroup]="form" #formRef="ngForm">

this.formRef.onSubmit(undefined)

例如：

<form (ngSubmit)="save()" #documentEditForm="ngForm">
...
</form>

<button class="btn-save button primary"
(click)="documentEditForm.ngSubmit.emit()"
[disabled]="!documentEditForm.form.valid">SAVE</button>

// html
<form [formGroup]="form" #formRef="ngForm">
    // ...Form Controls
</form>

// component.ts
export class MyComponent {

    @ViewChild('formRef')
    formRef: FormGroupDirective;

    form: FormGroup = new FormGroup({
        myInput: new FormControl(''),
        //etc...
    });

    submitFormProgrammatically() {
        this.formRef.onSubmit(undefined);
    }
}

//html
//…窗体控件
//组件技术
导出类MyComponent{
@ViewChild（'formRef'）
formRef:FormGroupDirective；
form:FormGroup=新FormGroup({
myInput:new FormControl（“”），
//等等。。。
});
按程序提交（）{
此.formRef.onSubmit（未定义）；
}
}

如果您只是调用
this.formRef.ngSubmit.emit（）
，正如其他一些答案所建议的那样，您将无法获得所有重要的
submitted=true
集

为什么这很重要

如果您使用的是任何角度CDK或角度材质控件，则除非已触摸（单击或获得焦点）窗体字段或已提交整个窗体，否则不会显示错误条件

因此，如果您缺少鼠标/光标从未输入过的必填字段，则即使您执行了
ngSubmit.emit（）
（因为表单的
submitted=false
，控件的
toucted=false
）操作，该字段也不会显示为红色

那么，使用常规的提交按钮，它是如何正常工作的呢？
通常，如果您有
Submit
（在
标记内），它将触发标准HTML
进行提交（与角度无关），并在表单标记上引发标准
Submit
事件

如果该
标记上也有一个
[formGroup]
指令（如上所示），则HTML表单
提交
事件被该指令“捕获”，这就是调用上述
onSubmit（）
函数的原因

这反过来会引发
ngSubmit
事件，如果需要进一步处理，您可以捕捉到该事件，如显示警报

因此，在使用material（reactive form）控件时，调用
onSubmit
而不是
ngSubmit.emit
以使验证处理正常工作是非常重要的。$event参数只能为null或未定义

进一步阅读：查看
ErrorStateMatcher
（仅适用于角度CDK/材质）以了解确切规则。如果解决默认设置的限制变得过于复杂，则可以创建自己的

更令人困惑的是：
[formGroup]
指令与只保存数据的
formGroup
不是同一个对象。只有指令上有
提交
，而
表单组
有
触摸
，
原始
，
脏
，
脏
此示例适用于角度6及以上

<form (ngSubmit)="save()" id="ngForm" [formGroup]="form"> 
    ... 
</form>

<button type="submit" class="btn-save button primary" form="ngForm">Save</button>


... 
拯救
这对我很有用

<form #editForm="ngForm">
  <button type="button" (click)="editForm.submitted = true; editForm.ngSubmit.emit(); anotherMethod();">
    Submit programatically
  </button>
</form>


按程序提交

关键是设置
submitted=true
和发出
ngSubmit
事件。
我写这个答案是希望它能帮助别人。我花了一整天的时间试图解决这个问题，关注其中的每一个答案和评论。。。但我仍然收到错误消息#documentEditForm（我的等价物）未找到（无法读取未定义的属性x…），无论我如何尝试

我认为“在”表单标记之外有问题的原因是，当我将提交/验证按钮放入
标记内时，这个问题就消失了。我去了这个兔子洞，但后来意识到有正当的理由我需要在形式之外

但后来我意识到我必须做两件事来解决这个问题：（1）在验证时向ngForm的名称添加
？
，（2）实现<form #documentEditForm="ngForm">
...
</form>

<button class="btn-save button primary" (click)="save()" [disabled]="documentEditForm?.invalid">
   SAVE
</button>

import { Component, OnInit, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';

export class XYZComponent implements OnInit {

  @ViewChild(NgForm) documentEditForm!: NgForm;

...