从 Angular 表单外部的按钮提交表单

Question

How can I submit a form in Angular (2+) programmatically from a button which resides outside of the form? This should be through a click event which invokes a function in an Angular component?

Answer 1

I use the method shown here (from: How to trigger Angular 2 form submit from component? )

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

    **<formname>.ngSubmit.emit()** is used to submit the form when click the button from outside of the form.

For Example :    
    <form (ngSubmit)="save()" #submitForm="ngForm">
      <input type="text" name="name" required>
    </form>    
    <button (click)="submitForm.ngSubmit.emit()"
    [disabled]="!submitForm.form.valid">SAVE</button>

When click the SAVE button its call the save() function in the component.