我们已经介绍了 ngForm 和 ngModel 的基础用法，现在我们来完善剩下的内容。SignupFormComponent 组件类的用户模型中，包含了一个嵌套属性 account ，account 对象中包含 email 和 confirm 属性，分为表示邮件地址和重复确认的邮件地址。针对这种场景，Angular 4.x 为我们提供了 ngModelGroup 指令，具体示例如下：
<form novalidate #f="ngForm"> <label> <span>Full name</span> <input type="text" placeholder="Your full name" ngModel> </label> <div ngModelGroup="account"> <label> <span>Email address</span> <input type="email" placeholder="Your email address" ngModel> </label> <label> <span>Confirm address</span> <input type="email" placeholder="Confirm your email address" ngModel> </label> </div> <button type="submit">Sign up</button> </form>
使用 ngModelGroup 指令后，我们的 DOM 结构将更加合理：
ngForm -> '#f' ngModel -> 'name' ngModelGroup -> 'account' -> ngModel -> 'email' -> ngModel -> 'confirm'
以上代码成功运行后，浏览器中页面显示的结果：
// { name: 'Semlinker', account: { email: '', confirm: '' } } {{ f.value | json }}
此时我们已经完成了表单数据绑定，接下来我们来为表单增加提交逻辑。
Template-driven submit
Angular 表单中提供了 ngSubmit 输出属性，用于监听表单的提交事件：
<form novalidate (ngSubmit)="onSubmit(f)" #f="ngForm"> ... </form>
当用户提交表单时，我们将会把 f 作为参数，调用 ngSubmit 关联的 onSubmit() 方法。onSubmit() 方法的具体实现如下：
export class SignupFormComponent { user: User = {...}; onSubmit({ value, valid }: { value: User, valid: boolean }) { console.log(value, valid); } }
上面代码中，我们使用 Object destructuring (对象解构) 的方式，从#f 引用对象中获取 value 和 valid 属性的值。其中 value 的值，就是 f.value 的值。表单的数据绑定方式和提交逻辑已经介绍完了，是该介绍表单实际应用中，一个重要的环节 — 表单验证。
Template-driven error validation
在为表单项添加验证规则前，我们先来更新一下 SignupFormComponent 组件中的 Sign up 按钮，确保在表单验证不通过时，不允许用户执行表单提交操作。
更新后的代码如下：
<form novalidate (ngSubmit)="onSubmit(f)" #f="ngForm"> ... <button type="submit" [disabled]="f.invalid">Sign up</button> </form>
以上代码我们通过 f.invalid 获取表单当前的验证状态 (验证不通过时该值为true)，来控制按钮的 disabled 属性。
接下来开始进入正题，为表单添加验证规则：