2016-06-12 7 views
0

を受信されていないイベントを提出します。フォームは、私は、再利用可能なフォームのコンポーネント(ユーザーが同じフォーム成分と&ユーザーの編集を作成する)</p> <p>マイフォームコンポーネントが<code>user-form.component.ts</code>と呼ばれ、親コンポーネントが<code>new-user.component.ts</code>と呼ばれるを作成しようとしている

私はそれがいくつかの小さな修正になるだろうと知っていますが、すべてが正しく(私が学んだことから、ちょうど始まって)結びついているようだし、私はあまりにも長くそれを見つめています。私はうまくいく別の例を持っていますが、何が違うのか分からないようです。

私のconsole.logにuser-formがあると、onSubmitイベントが発生しますが、放出されたイベントは親コンポーネントnew-userによって取得されていません。

最後に1つ、エラーは表示されません。

// 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> 
関連する問題

 関連する問題