Angular 如何修复 emit 不是事件发射器的函数

Question

我正在尝试使用带有事件发射器的单击事件来绑定和@Output，以从不同的组件记录数据。我需要一些我认为可能不使用好的方法的指导方针

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;

}

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

您已经在 contactform.component.ts 中创建了 onSave 输出事件，因此您必须从组件调用相同的事件来触发

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

Angular 如何修复 emit 不是事件发射器的函数

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

angular

angular-event-emitter