angular7中模板驱动型表单的基本使用

模板驱动表单实例

• ngForm 在angular应用中，会自动的添加到每个表单，NgForm隐式的创建了一个FormGroup类的实例
• ngForm可以被一个模板本地变量引用，以便在模板中访问ngForm对象的实例。
• ngModel同样也可以被模板本地变量引用，代表一个formControl对象的实例。
• NgModelGroup:代表表单的一部分，可以将表单的一部分组合在一起，形成清晰的层次关系。

使用模板驱动型表单首先需要在app.module.ts中引入FormsModule

import { FormsModule } from '@angular/forms';

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm.value)">
    <div>
        用户名：<input type="text" #username="ngModel" ngModel name="username">
    </div>
    <div>
        手机号：<input type="number" ngModel name="mobile">
    </div>
    <div ngModelGroup="passwordGroup">
        <div>
            密码：<input type="password" ngModel name="password">
        </div>
        <div>
            确认密码：<input type="password" ngModel name="pconfirm">
        </div>
    </div>
    <button>注册</button>
</form>

<div>
    {{myForm.value | json}} <br>
    {{username.value}}
</div>

模板驱动指令对应关系

属性指令	对应模型
NgForm	FormGroup
NgModel	FormControl
NgModelGroup	FormGroup