How to get the template driven form data on parent component submit button

Question

I have a child component in which I have rendered the text form input controls. My submit button is rendered in parent component so while submitting the form I am getting the empty data.

parent-component.html

<form #f="ngForm" name="myForm">

<app-text [users]="users"></app-text>
<br><br>
<button (click)="save(f)">Save</button>
</form>

parent.component.ts

import { Component } from '@angular/core';
import {
  NgForm
} from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class ParentComponent  {

  public users = {
    'firstname' :'',
    'lastname' :''
    };

  public constructor()
  {

  }

  save(myForm:NgForm)
  {
    console.log(myForm.value);
  }
}

child.component.ts (TextComponent)

import { Component,Input } from '@angular/core';

@Component({
  selector: 'app-text',
  templateUrl: './text.component.html',
  styleUrls: [ './text.component.css' ]
})
export class TextComponent  {
  @Input() users:any;
}

child.componet.html

<label>Enter the First Name</label>
<input type="text" [(ngModel)]="users.firstname" name="firstname">

<label>Enter the Last Name</label>
<input type="text" [(ngModel)]="users.lastname" name="lastname">

app.module.ts

import { NgModule,NO_ERRORS_SCHEMA,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { TextComponent } from './text/text.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, TextComponent],
  bootstrap:    [ AppComponent ],
  schemas:[CUSTOM_ELEMENTS_SCHEMA,NO_ERRORS_SCHEMA]
})
export class AppModule { }

Here I am submitting my form with values and trying to fetch the data into save method of parent component but I am getting the empty data.

How can I achieve it? is there any other way to achieve it?

Please help me. Thanks.

You have to implement the [`ControlValueAccessor` interface](https://angular.io/api/forms/ControlValueAccessor`) in order to make it work. Several guides exist online to make that. — , Mar 18 '19 at 09:05
Check this answer at this link https://stackoverflow.com/a/46748943/7109092 — Muhammad Ahsan, Mar 18 '19 at 09:05
@SandySanap you need to pass the `users` array to child component as two way binding ``, so that when it updates `users` object in child, it would be reflected back to parent — dreamweiver, Mar 18 '19 at 09:11
@dreamweiver i have passed array to child component as two way binding but i am getting ERROR TypeError: Cannot read property 'users' of undefined — Sandy Sanap, Mar 18 '19 at 09:19
@dreamweiver still not working You can find the url of stackblitz.com here https://stackblitz.com/edit/angular-ejbehk — Sandy Sanap, Mar 18 '19 at 09:42
@SandySanap: I think it has something to do with the internal workings of `ngForm`, however, you can always check the value of firstName from `this.users.firstname` to get the entered value in the `save()` method — dreamweiver, Mar 18 '19 at 10:06

score 0 · Answer 1 · answered Mar 18 '19 at 09:07

0

If you want to create components which are form component, I would strongly suggest you to use ControlValueAccessor.

This interface allows you to create component which can interact with both template driven or reactiv forms.

answered Mar 18 '19 at 09:07

Grégory Elhaimer

2,731
1
16
21

How to get the template driven form data on parent component submit button

1 Answers1