request| feat(form): Ability to programmatically submit an AbstractControl, NgForm or a FormGroupDirective

[lemoinem]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[x] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

In standard HTML/TypeScript, without angular, it's possible to get a HTMLFormElement and call either .sumbit() or .reset() on it to submit it programmatically. If we want to do this in an Angular2 Component, we will need to either:

• have a @ViewChild('myForm') formElementRef, casting the formElementRef.nativeElement to HtmlFormElement and then call .submit() on it
• have a hidden input type="sumbit" (or similar), again do a @ViewChild on it and trigger it programmatically.

Note that in the case of .reset() this is very well supported and documented.

Expected behavior

To be able to trigger the .submit() operation directly from an FormGroup/FormArray or even an NgForm would be really helpful.
There are cases where, for practical UI/UX reasons the submit button cannot be in the <form> element itself. Although this is far from ideal, it's still something that can be and is done.

Minimal reproduction of the problem with instructions

`<button #submit>Submit!

[...]`

Then try to submit the form without using an ElementRef or a hidden submit inside the <form>.

What is the motivation / use case for changing the behavior?

Some UIs will require us to have the submit element outside of the <form>, or to submit a form relying on different mechanism/conditions (e.g., time triggered for a game-like UI).

Environment

Angular version: 5.1.0-beta.1

[msc117]

The only way I'm able to do this currently is to use this code

form.ngSubmit.emit();
(form as any).submitted = true;

You need to cast as any because typescript will complain submitted is a readonly property

[Lonli-Lokli]

Out approach now is:
html:
<form [formGroup]="form" #myForm="ngForm" novalidate class="create-form">

ts:

@ViewChild('myForm') ngForm: NgForm;

...
public onSubmit() {
   this.ngForm.onSubmit(undefined); // it will setup submitted as true

[nischi]

The only way I'm able to do this currently is to use this code

form.ngSubmit.emit();
(form as any).submitted = true;

You need to cast as any because typescript will complain submitted is a readonly property

I do a override class which avoid a any cast.

// separate class
export class FormGroupDirectiveOverride extends FormGroupDirective {
  // Make submitted writeable because reactive forms can be submitted programmatically
  // https://github.com/angular/angular/issues/20562
  submitted: boolean;
}

// component
@ViewChild(FormGroupDirective) formGroupDirective: FormGroupDirectiveOverride;
this.formGroupDirective.submitted = true;

[DmitryEfimenko]

why is the submitted property readonly? Maybe someone from Angular team can shine some light?

[JeanMeche]

@DmitryEfimenko submitted is meant to be set by the submit event of the host of the FormGroupDirective.

[JeanMeche]

Btw this exemple mentionned by OP, a button outside the form can be handled with bare HTML : reference the form to the submit button.

------v
<form id="myform" [formGroup]="myFg">
    ....
</form>

<input type="submit" form="myform" value="Update"/>
---------------------^

That being said, I'm not sure we should implement this.