(十五)、Angular4.0 模板式表单

一、新建一个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>