How to trigger Angular 2 form submit from component?

Question

Basically, I have

<form #f="ngForm" (ngSubmit)="save(f.form)" #formElement>
    ...
    <button class="btn btn-primary" #saveButton>Save</button>
</form>

I want to be able to trigger submit() from the component. I've tried @viewChild('formElement') and renderer.invokeElementMethod to trigger click().

Answer 1

NgForm has property ngSubmit which is EventEmitter. So doing emit() on this property from the component will trigger a submit.

Also you need to use your f variable instead of formElement because f is referencing to ngForm.

@ViewChild('f') form: NgForm;

form.ngSubmit.emit();

Answer 2

I was trying that ngSubmit.emit() approach to update the validation state of the form fields from component, now this can be done with:

this.formGroup.markAllAsTouched();