CODEWITHSUNDEEP
angulartypescript
dEf
dEf

Reputation: 77

How do I access a FormGroup value from a separate component in Angular2?

So in my FromComponent I have a FormGroup. I have another component named ReviewComponent that doesn't have a FormGroup.

I need to access the data in the FromComponent's FormGroup....for example (FromForm.controls.contact.value).

I know how to pass regular variables on to separate components, but whenever I try to access a FormGroup, it just comes up as undefined.

    import {
    FormBuilder,
    Validators,
    ReactiveFormsModule,
    FormGroup,
    ControlValueAccessor,
}                               from '@angular/forms';
import {
    Component,
    Input,
    Output,
    OnInit,
    ElementRef,
    Injectable,
    ViewEncapsulation,
    ViewChild,
    OnChanges,
    AfterViewInit
}                               from '@angular/core';


@Component({
    moduleId: module.id,
    selector: 'app-wiz-from',
})

@Injectable()
export class WizFromComponent implements OnInit, OnChanges, AfterViewInit {
    public fromForm: FormGroup;

    constructor(
        public fb: FormBuilder, 
    ) {}

    ngOnInit() {
        // Create the Form Group.
        this.fromForm = this.fb.group({
            contact: [this.shipment.shipment[0].addresses[0].contactName, Validators.required],
            email: [this.shipment.shipment[0].addresses[0].email, Validators.pattern(this.email_reg)]
        });
    }


    goNext() {
        console.log('Testing Data: ', this.fromForm);
        var address = new Addresses()
        address.type = 'fromPerson',
        address.contactName = this.fromForm.controls.contact.value,
        address.email = this.fromForm.controls.email.value
        console.log('Clicked Next on From!');
    }
}

Then on my outside component:

import { WizShipFromComponent } from '../wiz-ship-from/wiz-ship-from.component';

constructor(
        public wizFrom: WizFromComponent
    ) {}

export class WizReview() {
    console.log('From Contact: ', this.wizFrom.fromForm);
}

But when I try to call this.wizFrom.fromForm like above, it returns undefined. Even stranger to me, if I just call the goNext() function from WizFromComponent, the function runs, but the fromForm.controls all come up as undefined.

Any other type of variable returns fine. What do I have to do to get the FormGroup data?

Upvotes: 0

Views: 4263

Answers (2)

Unsinkable Sam
Unsinkable Sam

Reputation: 4247

Based on what you written in your answer on my comment, I would suggest the following solution:
In the class of Review declare the reference to FromComponent using ViewChild.
This way you'll be able to call goNext() along with all the other public attributes and methods defined in FromComponentinside Review (you can't just instantiate a variable of WizFromComponent inside Review and expect to get the data from the child component, this won't work).

import { WizShipFromComponent } from '../wiz-ship-from/wiz-ship-from.component';


  export class WizReview() {

    @ViewChild(FromComponent)
    private wizFrom: FromComponent;

    public callingFromMethodsAndAttributes() {
      console.log('From Contact: ', this.wizFrom.fromForm);
      console.log('Go Next: ', this.wizFrom.goNext());
    }

  }

One last thing I noticed, is that you're annotating FromComponent with @Injectbale(). In angular, you should only declare services as Injectable and not components.

Upvotes: 2

Yakov Fain
Yakov Fain

Reputation: 12376

Your problem is that you're trying to inject the WizFromComponent into the ReviewComponent. It doesn't work like this. You can inject services and not components.

Create an injectable service and inject it into both WizFromComponent and ReviewComponent. Then the code in the WizFromComponent should put the object fromForm into this service, and the ReviewComponent should get it from there.

Upvotes: 2

Related Questions