来自父级的子组件表单中的 Angular 2+ 表单组设置值

Question

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

要解决的问题是我的 IDE Webstorm 中的以下消息：

属性"setValue"在类型"AddEditFormComponent"上不存在。

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

这是子组件，基本形式：

add-edit-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]
});
}
}

使用一点角度材料 2 样式，表单看起来不错。

这是有问题的父组件：

edit-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

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

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

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

ngAfterViewInit() {
this.fetchMember();
}

此问题是表单在尝试加载数据之前需要时间来呈现。 哒！ :-) 希望这一切都能帮助其他迷路的小狗。 另一个问题是，有一天我将不得不弄清楚如何使用Plunker。在我的第一个应用程序上要学习很多东西！