Angular 5 Parent and Child Communication

Question

I want to create components for Create & Edit but it shares the same form, so I make the Form in another component.

here is the code:

Parent: OrganizationEditComponent (I populate organization data using resolver)

import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import { AlertifyService } from './../../_services/alertify.service';
import { Organization } from './../../_models/organization';
import { OrganizationService } from './../../_services/organization.service';


@Component({
  selector: 'app-organization-edit',
  templateUrl: './organization-edit.component.html',
  styleUrls: ['./organization-edit.component.css']
})
export class OrganizationEditComponent implements OnInit {
    org: Organization;
    editForm: FormGroup; 

  constructor(private orgService: OrganizationService,
    private fb: FormBuilder,
    private route: ActivatedRoute,
    private router: Router, 
    private alertify: AlertifyService) { }

  ngOnInit() {
    this.route.data.subscribe( data => {
        this.org = data['organization'];
    });
  }

  }


}

OrganizationEditComponent.html

<h1>Children </h1> 
<app-organization-form [org]="org"></app-organization-form>

Children component: OrganizationFormComponent.ts

import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import { AlertifyService } from './../../_services/alertify.service';
import { Organization } from './../../_models/organization';
import { OrganizationService } from './../../_services/organization.service';


@Component({
  selector: 'app-organization-form',
  templateUrl: './organization-form.component.html',
  styleUrls: ['./organization-form.component.css']
})
export class OrganizationFormComponent implements OnInit {
    @Input() org: Organization;
    myForm: FormGroup;

  constructor(private orgService: OrganizationService,
    private fb: FormBuilder,
    private route: ActivatedRoute,
    private router: Router,
    private alertify: AlertifyService
    ) { }

  ngOnInit() {
      this.createForm();
  }

  createForm() {
    this.myForm = this.fb.group({
        organizationName: [this.org.organizationName, Validators.required],
        legalName: [this.org.legalName, Validators.required],
        logoUrl: [this.org.logoUrl, Validators.required],
        abn: [this.org.abn, Validators.required],
        acn: [this.org.acn, Validators.required]
    });    
  }

  save() {

  }
}

OrganizationFormComponent.html

{{org |json}}

<div class="container">
    <div class="row">
        <form [formGroup]="myForm" (ngSubmit)="save()" class="form-horizontal">

            <div class="form-group" [ngClass]="{'has-error': editForm.get('organizationName').touched && editForm.get('organizationName').hasError('required')}">
              <label class="col-sm-2" for="organizationName">organizationName</label>
              <div class="col-sm-7">
                <input class="form-control" placeholder="organizationName" formControlName="organizationName">
                <span class="help-block" *ngIf="editForm.get('organizationName').touched && editForm.get('organizationName').hasError('required')">organizationName is required</span>
              </div>
            </div>
            <div class="form-group" [ngClass]="{'has-error': editForm.get('legalName').touched && editForm.get('legalName').hasError('required')}">
              <label class="col-sm-2" for="legalName">legalName</label>
              <div class="col-sm-7">
                <input class="form-control" placeholder="legalName" formControlName="legalName">
                <span class="help-block" *ngIf="editForm.get('legalName').touched && editForm.get('legalName').hasError('required')">legalName is required</span>
              </div>
            </div>
            <div class="form-group" [ngClass]="{'has-error': editForm.get('logoUrl').touched && editForm.get('logoUrl').hasError('required')}">
              <label class="col-sm-2" for="logoUrl">logoUrl</label>
              <div class="col-sm-7">
                <input class="form-control" placeholder="logoUrl" formControlName="logoUrl">
                <span class="help-block" *ngIf="editForm.get('logoUrl').touched && editForm.get('logoUrl').hasError('required')">logoUrl is required</span>
              </div>
            </div>
            <div class="form-group" [ngClass]="{'has-error': editForm.get('abn').touched && editForm.get('abn').hasError('required')}">
              <label class="col-sm-2" for="abn">abn</label>
              <div class="col-sm-7">
                <input class="form-control" placeholder="abn" formControlName="abn">
                <span class="help-block" *ngIf="editForm.get('abn').touched && editForm.get('abn').hasError('required')">abn is required</span>
              </div>
            </div>
            <div class="form-group" [ngClass]="{'has-error': editForm.get('acn').touched && editForm.get('acn').hasError('required')}">
              <label class="col-sm-2" for="acn">acn</label>
              <div class="col-sm-7">
                <input class="form-control" placeholder="acn" formControlName="acn">
                <span class="help-block" *ngIf="editForm.get('acn').touched && editForm.get('acn').hasError('required')">acn is required</span>
              </div>
            </div>
        </form>
    </div>
</div>

When I run the code I got error:

ERROR TypeError: Cannot read property 'get' of undefined

and it refer to chidlren component html

<form [formGroup]="myForm" (ngSubmit)="save()" class="form-horizontal">

my routes.ts

{path: 'organisation/edit/:id', component: OrganizationEditComponent, resolve: {organization: OrganizationResolver}},

The parent component was fine getting the organization data from resolver. but the child component cannot receive the data ? what should I do ? and how to send back the "org" data to parent ? should I use @ViewChild ?

Edit: I test the org in child component html by typing the

{{ org | json }}

it work, but if i put the form like the code above it didn't work. It seems I have error from the children "createform()" where it cannot get the org data from parent in OnInit

Franklin Pious Franklin Pious · Accepted Answer · 2018-05-02T19:41:45

I think you went wrong with the form name.

you have written editForm instead of myForm.

eg.

'has-error': editForm.get('organizationName').touched

Angular 5 Parent and Child Communication

1 Answers