形式提交沒有收到

事件我試圖做一個可重複使用的表單組件（用戶創建具有相同形式的組件&用戶編輯）形式提交沒有收到

我的表單組件被稱爲user-form.component.ts和父組件被稱爲new-user.component.ts。

我知道這將會是一些小的修復，但一切似乎都正確地聯繫在一起（從我所學到的，剛開始），我一直在盯着它太長時間。我有另一個可行的例子，但似乎無法找到與衆不同的例子。

在我的console.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>

來源

2016-06-12 awwester

有一個綁定到事件失蹤

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

來源

2016-06-12 16:14:52

形式提交沒有收到

回答

相關問題