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.