Я пытаюсь сделать многоразовые формы компонента (пользователю создавать & пользователю редактировать с той же формой компонента)форма представить событие не получил
Моя форма компонент называется user-form.component.ts
и родительский компонент называется new-user.component.ts
.
Я знаю, что это будет небольшое исправление, но все, кажется, правильно подключено (из того, что я узнал, только начинаю), и я слишком долго смотрел на него. У меня есть другой пример, который работает, но не может показаться, что он отличается.
В моей консоли.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>