0

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.

naspinski
  • 32,338
  • 34
  • 100
  • 151
  • Question is hard to follow, can you create a small reduction of the problem? Your problem doesn't seem to be related to formgroups but related to getting a reference to the formgroup – Juan Mendes Jan 13 '17 at 15:08
  • I will give it a go, but with the whole broadcast thing there are a lot of moving parts... maybe I will take that out and focus on just the function – naspinski Jan 13 '17 at 15:10
  • ok, stripped down and more clear now – naspinski Jan 13 '17 at 15:19
  • 1
    Can't you just use 'form' in the callback? Or use an arrow function instead. – MikeOne Jan 13 '17 at 15:23
  • MikeOne, I do not follow - I am not sure how to use an arrow function in this context - and I don't kave 'form' defined anywhere - is that built in to angular2? – naspinski Jan 13 '17 at 15:27
  • As Mike said, you are losing a reference to this by not using an arrow function. Referencing `form` will only work if you assign it after you create `this.frm` – Juan Mendes Jan 13 '17 at 15:28
  • What do you mean you have no `form` variable? First statement in your `ngOnInit` – Juan Mendes Jan 13 '17 at 15:29
  • If you use the arrow function, `this` is locked down to the same thing it was in the outer function. With a regular function, `this` depends on how it was called. – Juan Mendes Jan 13 '17 at 15:30
  • @naspinski. You're creating a local var form = this.form. You could use that. Or use an arrow function which will preserve 'this' from the outer scope this.toolbarService.addAction(new ToolbarItem('save', () => { // arrow function, this is preserved console.log(this.frm); // Should now work })); – MikeOne Jan 13 '17 at 15:31
  • @MikeOne Just using `form` won't work, see my comment – Juan Mendes Jan 13 '17 at 15:31
  • I must say this: It's weird to see someone with `15.7k` rep struggling with `this` :) – Juan Mendes Jan 13 '17 at 15:32
  • @Juan - it should really.. It's by reference. – MikeOne Jan 13 '17 at 15:36
  • @MikeOne Of course not. `var form = this.frm`, that sets `form` to undefined. Setting `this.frm` later will not change what `form` is pointing to. See https://jsfiddle.net/7wsgwm0y/ It will only work if you reassign it to `form` after – Juan Mendes Jan 13 '17 at 15:37
  • I didn't realize I left in some debugging code with defining 'form', I removed it, my mistake. Haha, thanks - had a brain fart, been in C# all week!!! - you guys are harsh! just changed the function to: () => this.onSubmit(this.frm) – naspinski Jan 13 '17 at 15:45
  • @JuanMendes - you're right, I thought frm was already set but it was only typed. – MikeOne Jan 13 '17 at 15:52
  • @naspinski Yeah, I was a bit harsh, sorry. I assume people with high rep will have thick skin :). I also assumed that new to Angular meant not new to JS – Juan Mendes Jan 13 '17 at 16:00
  • haha, no problem - I deserved it! – naspinski Jan 13 '17 at 19:29

0 Answers0