I have a basic model driven form as explained here: https://scotch.io/tutorials/using-angular-2s-model-driven-forms-with-formgroup-and-formcontrol
I need to trigger a form to submit, but when I try to read my FormGroup in that function, its always empty/null. If I just click the submit button, it works great. Here is a stripped down version:
import { Component } from "@angular/core";
import { AbstractControl, FormBuilder, FormGroup, Validators, FormArray } from "@angular/forms";
import { Toolbar } from "myServices";
import { ToolbarItem } from "myClasses";
// services
@Component({
    selector: "my-component",
    templateUrl: `
        <form [formGroup]="frm" (ngSubmit)="onSubmit(frm)">
            <label>Serial</label>
            <input type="text" formControlName="SerialNumber" [value]="SerialNumber?.value" />
            <button id="form-submit" type="submit">Submit</button>
        </form>
    `
})
export class MyComponent {
    constructor(
        private readonly fb: FormBuilder,
        private toolbar: Toolbar //this just adds a button to a toolbar
    ) { }
    onSubmit({ value, valid }: { value: any, valid: boolean }) {
        console.log(value, valid);
    }
    ngOnInit() {
        this.toolbarService.addAction(new ToolbarItem('save', function () { 
            // function called when this button is clicked
            // how do I submit the form here?
            console.log(this.frm); //this has no values, 'this' is a different scope
        }));
        this.frm = this.fb.group({
            SerialNumber: ['abc123']
        });
    }
}
Pretty new to Angular, so if I am leaving something out, please let me know.
