Formular Ereignis nicht

Question

empfangen werden Ich versuche, eine wiederverwendbare Form Komponente zu machen (Benutzer & Benutzer bearbeiten mit der gleichen Form Komponente erstellen)

Meine Form Komponente user-form.component.ts und eine übergeordnete Komponente genannt wird new-user.component.ts genannt wird.

Ich weiß, dass es eine kleine Lösung sein wird, aber alles scheint richtig angeschlossen zu sein (von dem, was ich gelernt habe, gerade erst angefangen) und ich habe es viel zu lange angeguckt. Ich habe ein anderes Beispiel, das funktioniert, aber ich finde nicht, was anders ist.

In meiner console.log in user-form passiert das onSubmit Ereignis, aber das emittierte Ereignis wird nicht von der übergeordneten Komponente new-user abgeholt.

Eine letzte Sache, ich sehe keine Fehler.

// 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> 

Answer 1

Es ist das Ereignis einer Bindung fehlt

<tut-user-form (userFormEmit)="userFormEmit($event)"></tut-user-form>