形式提交没有收到

问题描述：

事件我试图做一个可重复使用的表单组件（用户创建具有相同形式的组件&用户编辑）形式提交没有收到

我的表单组件被称为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>

答

有一个绑定到事件失踪

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

形式提交没有收到

相关推荐