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>