![](/img/trans.png)
[英]Let know Child Component that it is part of FormGroup of Parent Component Angular
[英]Angular 2+ formgroup setValue in child component form from parent
我有一个要在添加成员组件和编辑成员组件之间共享的表单组件。 如果将表单代码放在每个组件中,一切都会很好,但是,我不想永远被禁止编码,因为我的代码不是DRY。 我是编码新手。
要解决的问题是我的IDE Webstorm中的以下消息:
类型'AddEditFormComponent'上不存在属性'setValue'。
此消息来自父组件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]
});
}
}
稍微增加Angular Material 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用成员数据填充子窗体,以便我可以对其进行编辑。 那没有发生,我怀疑我对这是如何工作的并不完整。
帮助当然是赞赏的!
为了掌握AddEditFormComponent
我将使用@ViewChild
import { ViewChild } from '@angular/core';
...
@ViewChild(AddEditFormComponent)
private addEditMemberComponent: AddEditFormComponent;
然后我们可以写
this.addEditMemberComponent.addEditMemberForm.setValue({ // THIS SHOULD WORK
...
yurzui的反应非常好,并帮助我朝正确的方向前进。 有多种获取和输出表格数据的方法,对于我的应用程序,@ ViewChild是最佳选择。
但是,我仍然无法将数据输入表单,并且在尝试时崩溃了。 我在上面的评论反映了这一斗争。
答案的最后一部分是我不能在父类中使用ngOnInit()。 我必须使用这个生命周期挂钩:
ngAfterViewInit() {
this.fetchMember();
}
问题是表单在加载数据之前需要时间来呈现。 ah! :-)希望所有这些对其他迷路的小狗有所帮助。 另一个问题是我有一天必须弄清楚如何使用Plunker。 在我的第一个应用程序上要学习的东西太多了!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.