2016-02-22 3 views
3

У меня есть 2 компонента, компонент 'create' и дочерний компонент 'form'. Мне нужен компонент формы, чтобы передать событие submit вместе с данными формы.Angular2: получить один аргумент, переданный в EventEmitter

Настоящая проблема заключается в том, когда я регистрирую полученное событие, я получаю 2 вместо одного события/arg. Это то, что он регистрирует: Event {isTrusted: true}, а затем Contact {name: inputName}

Как фильтровать события, поэтому я действую только тогда, когда получаю объект Contact?

Родителя «создать» компонент:

import {Component, OnInit } from 'angular2/core'; 
import {Contact} from './contact'; 
import {ContactFormComponent} from './contact-form.component'; 

@Component({ 
    selector: 'contact-create', 
    template: ` 
     <h2>Nuevo contacto</h2> 

     <div class="panel panel-default"> 
     <div class="panel-body"> 

      <contact-form [contact]="contact" (formSubmitted)="saveContact($event)"></contact-form> 

     </div> 
     </div> 
    `, 
    directives: [ContactFormComponent] 
}) 
export class ContactCreateComponent { 

    contact: Contact = new Contact(''); 

    constructor(
     private router: Router, 
     private contactService: ContactService) { } 

    saveContact(args) { 
    console.log(args); 
    } 
} 

Детского компонент «формы»

import {Component, EventEmitter} from 'angular2/core'; 
import {NgForm} from 'angular2/common'; 
import {Contact} from './contact'; 

@Component({ 
    selector: 'contact-form', 
    inputs: ['contact'], 
    outputs: ['formSubmitted'], 
    templateUrl: 'app/contacts/contact-form.component.html', 
}) 
export class ContactFormComponent { 

    contact: Contact; 
    formSubmitted: EventEmitter<any> = new EventEmitter(); 

    onSubmit(contact) { this.formSubmitted.next(contact); } 
} 
+1

Было бы проще и чище, если вы переименуете свой вывод, чтобы он не соответствовал стандарту [отправить событие] (https://developer.mozilla.org/es/docs/Web/Events/submit);) –

+1

Я wasn ' t достаточно ясно. Ваша проблема в том, что ваш результат соответствовал событию отправки по умолчанию, поэтому он запускался дважды. Переименовав свой результат (как вы уже делали в своем вопросе), у вас больше не должно быть проблем. –

+0

Вот что было на самом деле! Спасибо @EricMartinez – Mathius17

ответ

6

Для справки и добавить дополнительную информацию к сведению, что в вопросе имя выходного первоначально было submit согласованием DOM submit event (ОП переименовал его в вопрос из-за отсутствия объяснения проблемы в моем first comment), поэтому исходная проблема заключается в том, что компонент захватывал оба события: выход, определенный OP и th e из формы.

Существует проблема (см. #4059), отслеживающая это поведение. Это явно не должно произойти.

Настоящим решением при должном уважении к @Sasxa является переименование вывода, чтобы он не соответствовал событию отправки DOM, до тех пор, пока не будет упомянута проблема, упомянутая выше.

+1

Вы правы, я сосредоточился на выводах журнала, даже не регистрировал имена событий (; – Sasxa

+0

Я тоже укушен этим. Сохранение имени выходного события «submit» было ловушкой дважды, почти потянув мои волосы. @ Ери Мартинес и Матиус за то, что подняли на SO. +1 – Nexus23

Смежные вопросы