父組件的子組件表單中的Angular 2+表單組setValue

Question

我有一個要在添加成員組件和編輯成員組件之間共享的表單組件。 如果將表單代碼放在每個組件中，一切都會很好，但是，我不想永遠被禁止編碼，因為我的代碼不是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用成員數據填充子窗體，以便我可以對其進行編輯。 那沒有發生，我懷疑我對這是如何工作的並不完整。

幫助當然是贊賞的！

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();
}

問題是表單在加載數據之前需要時間來呈現。 ah！ :-)希望所有這些對其他迷路的小狗有所幫助。 另一個問題是我有一天必須弄清楚如何使用Plunker。 在我的第一個應用程序上要學習的東西太多了！