Здравствуйте, я пытаюсь понять, как вы можете создавать многократно используемые формы в Typescript
. Я понял, что вы можете создать Form Component
, написать его HTML
файл, в котором вы используете model
fields
. Вы оставляете файл .ts
без изменений.
Затем вы получаете компонент, которому нужна форма, и встраиваете selector
в родительский файл component
HTML
:
Компонент формы
@Component({
selector: 'app-user-form',
templateUrl: './user-form.component.html',
styleUrls: ['./user-form.component.sass']
})
export class UserFormComponent implements OnInit {
public Submit(empform:NgForm):void{ //can i make this abstract...or somehow make it available from the parent component to implement?
console.log(empform);
}
constructor() { }
ngOnInit() {
}
}
<form #userForm="ngForm" (ngSubmit)="Submit(userForm)">
<div class="form-group">
<label>Id</label>
<input id="id" [(ngModel)]="id" type="text" class="form-control" name="jid">
</div>
<button type="submit" class="btn btn-primary">Save</button>
<//form>
Итак, теперь я понимаю, что если вы объявите переменную внутри parent
Component
с полями, названными как в вашей формеуспешно связал их.
Родительский компонент
export class CreateComponent implements OnInit {
public id:number; // this parent variable is bound to the field of the form
submit(empForm:NgForm):void{ //override or something depending on the parent
console.log(empForm);
}
}
<div id="childForm">
<app-user-form></app-user-form>
</div>
Что мне интересно, так это то, как я могу заставить form
выставить method
для parent
, а родитель для его реализации?Я хочу, чтобы form
онемел, а родитель решал, как реагировать на submit
.