Question

我有一个表单组件，我想在添加成员组件和编辑成员组件之间共享。如果我将表单代码放在每个组件中，一切正常，但是，我不想永远禁止编码，因为我的代码不干。我是编码新手。

要解决的问题是我的IDE中的这条消息，Webstorm：

Property＆＃39; setValue＆＃39;类型＆＃39; AddEditFormComponent＆＃39;。
上不存在

此消息来自父组件EditMemberComponent。首先，我将介绍我尝试在编辑和添加组件之间共享的表单代码。

这是子组件，基本形式：

添加 - 编辑form.component.ts

import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
selector: 'app-add-edit-form',
templateUrl: './add-edit-form.component.html'
})

export class AddEditFormComponent implements OnInit {

  addEditMemberForm: FormGroup;

  constructor(
    private fb: FormBuilder
  ) { }

  ngOnInit() {
    this.createForm();
  }

  createForm() {
    this.addEditMemberForm = this.fb.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      mainSkillTitle: ['', Validators.required],
      mainSkills: ['', Validators.required],
      otherSkills: ['', Validators.required],
      links: ['', Validators.required],
      country: ['', Validators.required]
    });
  }
}

使用一点Angular Material 2造型，表格看起来不错。

这是问题父组件：

编辑member.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

import { MembersAdminService } from './member-admin.service';
import { Member } from './member-admin.model';
import { AddEditFormComponent } from './add-edit-form.component';

@Component({
  selector: 'app-edit-member',
  templateUrl: './edit-member.component.html'
})

export class EditMemberComponent implements OnInit {

  private memberId: string;
  private memberData;
  private addEditMemberForm: AddEditFormComponent;

  constructor(
      private membersAdminService: MembersAdminService,
      private successService: SuccessService,
      private route: ActivatedRoute,
      private router: Router
  ) {}

  ngOnInit() {
    this.fetchMember();
  }

  fetchMember() {
    this.route.params.forEach((urlParameters) => {
      this.memberId = urlParameters['id'];
      console.log(this.memberId); // Perfect
    });

    // Display the data retrieved from the data model to the form model.
   this.membersAdminService.getMemberById(this.memberId)
      .subscribe(dataLastEmittedFromObserver => {
          this.memberData = dataLastEmittedFromObserver;
          console.log(this.memberData);  // This works fine.  Now to post to form...

          this.addEditMemberForm.setValue({ // HERE IS THE PROBLEM
            firstName: this.memberData.firstName,
            lastName: this.memberData.lastName,
            mainSkillTitle: this.memberData.mainSkillTitle,
            mainSkills: this.memberData.mainSkills,
            otherSkills: this.memberData.otherSkills,
            links: this.memberData.links,
            country: this.memberData.country
          })
      });
   }

}

我希望这一行能将所有表单代码带入父代：

private addEditMemberForm: AddEditFormComponent;

除了这个导入，我还希望.setValue在addEditMemberForm属性的父级中可用。我希望setValue用成员数据填充子表单，以便我可以编辑它。这种情况并没有发生，我怀疑我的心理图不完整。

当然感谢您的帮助！

Answer 1

要抓住AddEditFormComponent，我会使用@ViewChild

import { ViewChild } from '@angular/core';

...
@ViewChild(AddEditFormComponent)
private addEditMemberComponent: AddEditFormComponent;

然后我们可以写

this.addEditMemberComponent.addEditMemberForm.setValue({ // THIS SHOULD WORK
  ...

Answer 2

yurzui的反应非常好，帮助我朝着正确的方向前进。有多种方法可以将数据输入和输出表单，对于我的应用程序，@ ViewChild是最佳选择。

但是，我还是无法将数据输入到表单中，当我尝试时它仍然崩溃了。我上面的评论反映了这种斗争。

答案的最后一部分是我不能在父类中使用ngOnInit（）。我必须使用这个生命周期钩子：

ngAfterViewInit() {

  this.fetchMember();
}

此问题是表单在尝试加载数据之前需要时间进行渲染。大新！ :-)希望这一切有助于其他一些失去的小狗。另一个问题是，我将不得不弄清楚如何使用Plunker。在我的第一个应用程序上学到了很多东西！

来自父级的子组件形式的Angular 2+ formgroup setValue

2 个答案: