CODEWITHSUNDEEP
angularangular-event-emitter
Kondas Lamar Jnr
Kondas Lamar Jnr

Reputation: 143

Angular how to fix emit is not a function with Event-emitter

I'm trying to bind and @Output with a click event with an event emitter to log the data in from a different component. I would need some guideline I think maybe not using the good approach

enter image description here

contactform.component.html

 <form class="form-signin form" [formGroup]="kForm" (ngSubmit)="onSubmit($event)">

    <div class="form-label-group">
      <input type="email" id="inputName"  placeholder="Name" formControlName="name" #name>
      <label for="inputName">Name</label>
    </div> 

    <div class="form-label-group">
      <input type="email"  placeholder="Email address" formControlName="email" #email>
      <label for="inputEmail">Email address</label>
    </div>

    <div class="form-label-group">
      <input type="text"  class="form-control" placeholder="phone" formControlName="phone" #phone>
      <label for="inputPhone">Phone</label>
    </div>

    <div class="form-label-group">
        <input type="text"   placeholder="country" formControlName="country" #country>
        <label for="inputCountry">Country</label>
      </div>

    <button class="btn  btn-primary" type="submit" [disabled]="!kForm.valid" (click)="onSubmit(name.value, email.value, phone.value, country.value)">Submit</button>
</form>

contactform.component.ts

import { Component, OnInit, Output, Input , EventEmitter} from '@angular/core';
import { Contact  } from '../model';

 @Output() onSave =  new EventEmitter<Contact>();  

onSubmit(value:Contact){ 
    this.onSave.emit(value) 
    this.onSave = this.kForm.value;
    // console.log('k',this.kForm.value);
    console.log('submitted', this.onSave)
  }

app.component.html

<contact-form (newItem)="addItem($event)"></contact-form>

app.component.ts

addItem(newItem:string){
    console.log(newItem)
  }

Model.ts

export interface Contact{
    name: string;
    email: string;
    phone: string;
    country: string;

}

Upvotes: 1

Views: 7711

Answers (2)

Prachi Shah
Prachi Shah

Reputation: 88

You have created output event which is onSave in contactform.component.ts,so you have to call same event from component to trigger like

<contact-form (onSave)="addItem($event)"></contact-form>

Upvotes: 1

Ralpharoo
Ralpharoo

Reputation: 828

Based on your provided code, it looks like you are re-assigning your EventEmitter here;

onSubmit(value:Contact){ 
    this.onSave.emit(value) 
    this.onSave = this.klloydForm.value; <-------------------- Remove this
    console.log('submitted', this.klloydForm.value)
}

If you re-assign this variable, you will lose scope to the original EventEmitter next time the form is submitted.

Upvotes: 3

Related Questions