2016-06-12 2 views
0

Я пытаюсь сделать многоразовые формы компонента (пользователю создавать & пользователю редактировать с той же формой компонента)форма представить событие не получил

Моя форма компонент называется user-form.component.ts и родительский компонент называется new-user.component.ts.

Я знаю, что это будет небольшое исправление, но все, кажется, правильно подключено (из того, что я узнал, только начинаю), и я слишком долго смотрел на него. У меня есть другой пример, который работает, но не может показаться, что он отличается.

В моей консоли.log в user-form происходит событие onSubmit, но излучаемое событие не подбирается родительским компонентом, new-user.

Последнее, что я не вижу ошибок.

// new-user.component.ts 
@Component({ 
    selector: 'new-user', 
    templateUrl: 'app/users/templates/new-user.template.html', 
    directives: [UserFormComponent], 
}) 
export class NewUserComponent{ 
    newUserForm: ControlGroup; 

    userFormEmit(form){ 
    // receive the user form from a child form component 
    // TODO: this isn't being seen from child form component 

    console.log('received submitted form', form); 
    this.newUserForm = form; 
    } 
} 


// new-user.template.html 
<div class="container"> 
    <h2>Create New User</h2> 
    <div class="row"> 
    <div class="col-sm-6 well"> 
     <tut-user-form></tut-user-form> 
    </div> 
    </div> 
</div> 


// user-form.component.ts 
@Component({ 
    selector: 'tut-user-form', 
    templateUrl: 'app/users/templates/user-form.template.html', 
    outputs: ['userFormEmit'] 
}) 
export class UserFormComponent{ 
    userForm: ControlGroup; 

    //outputs 
    userFormEmit = new EventEmitter() 

    onSubmit(){ 
    // submit the form and emit an event to parent component 
    console.log("emitting form submit..."); 
    this.userFormEmit.emit({form: this.userForm}); 
    } 

    constructor(fb: FormBuilder){ 
     this.userForm = fb.group({ 
      name: ['', Validators.required], 
      email: ['', Validators.required], 
      phone: ['', Validators.required], 
     street: [], 
     suite: [], 
     city: [], 
     zipcode: [], 
     }); 
    } 
} 


// user-form.template.html 
<form [ngFormModel]="userForm" (ngSubmit)="onSubmit()"> 

    ...fields 

    <button type="submit" class="btn btn-primary">Submit</button> 
</form> 

ответ

0

Существует привязка к событию отсутствующего

<tut-user-form (userFormEmit)="userFormEmit($event)"></tut-user-form> 
Смежные вопросы