Question

我正在尝试制作一个可重复使用的表单组件（用户使用相同的表单组件创建和用户编辑）

我的表单组件名为user-form.component.ts，父组件名为new-user.component.ts。

我知道它会成为一个小小的修复，但是所有东西似乎都被正确地连接起来（从我学到的东西，刚刚开始）并且我一直在盯着它看太长。我有另一个有效的例子，但似乎找不到与众不同的东西。

在user-form的我的console.log中，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>

Answer 1

缺少事件的绑定

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

表单提交事件未收到

1 个答案: