title: Angular 2+ formgroup setValue in child component form from parent
body: <p>I have a form component that I want to share between an add member component and an edit member component.  Everything works fine if I put the form code in each component but, well, I don't want to be banned from coding forever because my code isn't DRY.  I'm new at coding.</p>
  
  <p>The problem to be solved is this message in my IDE, Webstorm:</p>
  
  <blockquote>
    <p>Property 'setValue' does not exist on type 'AddEditFormComponent'.</p>
  </blockquote>
  
  <p>This message comes from the parent component EditMemberComponent.  First I'll present the form code that I'm trying to share between the edit and add components.</p>
  
  <p>This is the child component, the basic form:</p>
  
  <p>add-edit-form.component.ts</p>
  
  <pre><code>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]
      });
    }
  }
  </code></pre>
  
  <p>With a little Angular Material 2 styling the form looks good.</p>
  
  <p>This is the problem parent component:</p>
  
  <p>edit-member.component.ts</p>
  
  <pre><code>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) =&gt; {
        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 =&gt; {
            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
            })
        });
     }
  
  }
  </code></pre>
  
  <p>I expected this line to bring all the form code into the parent:</p>
  
  <pre><code>private addEditMemberForm: AddEditFormComponent;
  </code></pre>
  
  <p>Along with this import I expected .setValue to be available in the parent to the addEditMemberForm property. I expected setValue to populate the child form with the member data so I can edit it.  That isn't happening and I suspect I have an incomplete mental map of how this works.</p>
  
  <p>Help is appreciated of course!</p>