一、新建一个demo项目
ng new demo4
二、在demo4项目中新建一个组件
ng g component templateForm
三、表单由angular管理,简单模板式表单示例HTML --> template-form.component.html
<form #myFrom="ngForm" (ngSubmit)="onSubmit(myFrom.value)">
<div ngModelGroup="userInfo">
<div>用户名:<input #username="ngModel" ngModel name="username" type="text"></div>
<div>手机号:<input #mobile="ngModel" ngModel name="mobile" type="text"></div>
</div>
<div>密码:<input type="password"></div>
<div>确认密码:<input type="password"></div>
<button type="submit">注册</button>
</form>
<div>
{{myFrom.value | json}}
</div>
<div>
{{username.value}}
</div>
<div>
{{mobile.value}}
</div>
四、template-form.component.ts 中定义一个简单的onSubmit方法,把传入的参数打印到控制台
onSubmit(value: any) {
console.log(value);
}
五、在app.component.html中使用template-form组件
<app-template-form></app-template-form>
六、启动项目,访问localhost:4200,查看简单模板式表单示例
七、重构模板表单,去处多余的代码
<form #myFrom="ngForm" (ngSubmit)="onSubmit(myFrom.value)">
<div>用户名:<input ngModel name="username" type="text"></div>
<div>手机号:<input ngModel name="mobile" type="number"></div>
<div ngModelGroup="passwordGroup">
<div>密码:<input ngModel name="password" type="password"></div>
<div>确认密码:<input ngModel name="pConfirm" type="password"></div>
</div>
<button type="submit">注册</button>
</form>