Angular как исправить emit не функция с Event-emitter

Question

Я пытаюсь связать и @Output с событием click с источником событий для входа в данные из другого компонента. Мне понадобится какое-то руководство, которое, я думаю, возможно, не использует хороший подход

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

Модель. тс

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

}

Answer 1

Исходя из предоставленного вами кода, похоже, что вы переназначаете свой EventEmitter здесь;

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

Если вы переназначите эту переменную, вы потеряете область видимости для исходного EventEmitter в следующий раз, когда форма отправлен.

Answer 2

Вы создали выходное событие onSave в contactform.component.ts, поэтому вы должны вызывать одно и то же событие из компонента для запуска, как

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