Question

所以在我的FromComponent中我有一个FormGroup。我有另一个名为ReviewComponent的组件，它没有FormGroup。

我需要访问FromComponent＆＃39; FormGroup ....中的数据（例如FromForm.controls.contact.value）。

我知道如何将常规变量传递给单独的组件，但每当我尝试访问FormGroup时，它都会显示为未定义。

    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!');
    }
}

然后在我的外部组件上：

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

constructor(
        public wizFrom: WizFromComponent
    ) {}

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

但是当我尝试像上面那样调用this.wizFrom.fromForm时，它会返回undefined。对我来说更奇怪的是，如果我只是从WizFromComponent调用goNext（）函数，函数就会运行，但是fromForm.controls都是未定义的。

任何其他类型的变量都可以返回。我需要做什么才能获得FormGroup数据？

Answer 1

您的问题是您正在尝试将WizFromComponent注入ReviewComponent。它并不像这样工作。您可以注入服务而不是组件。

创建一个可注入服务并将其注入WizFromComponent和ReviewComponent。然后WizFromComponent中的代码应该将对象fromForm放入此服务中，而ReviewComponent应该从那里获取它。

Answer 2

根据您在评论中的回答，我建议采用以下解决方案：
在“审核”类中，使用FromComponent声明对ViewChild的引用通过这种方式，您可以调用goNext()以及审核中FromComponent中定义的所有其他公共属性和方法（您无法实例化{{1}的变量}回顾并期望从子组件获取数据，这不会起作用。

WizFromComponent

我注意到的最后一件事是你用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()); } }注释FromComponent。在angular中，您应该只将服务声明为@Injectbale()而不是组件。

如何从Angular2中的单独组件访问FormGroup值？

2 个答案: