ngModelGroup 指令是 Angular 表单中提供的另一特殊指令，可以对表单输入内容进行分组，方便我们在语义上区分不同性质的输入。例如联系人的信息包括姓名及住址，现在需对姓名和住址进行精细化信息收集，姓名可精细化成姓和名字，地址可精细化成城市、区、街等。
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)"> <fieldset ngModelGroup="user"> <input type="text" required minlength="3" [(ngModel)]="username" #userName="ngModel"> <hr> <div *ngIf="userName.errors?.required">请您输入用户名</div> <div *ngIf="userName.errors?.minlength"> 用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}}，当前的长度为 {{userName.errors?.minlength.actualLength}} </div> <input type="password" ngModel> </fieldset> <button type="submit">提交</button> <hr> {{loginForm.value | json}} </form> `, }) export class AppComponent { username = 'semlinker'; onSubmit(value) { console.dir(value); } }
以上代码成功运行后，{{loginForm.value | json}} 的输出结果：
{ "user": { "username": "semlinker", "password": "123" } }
第六节 - 表单添加验证状态样式
如何为表单添加验证状态样式信息？
在 Angular 表单中，若验证通过则会在表单控件上添加 ng-valid 类，若验证失败则会在表单控件上添加 ng-invalid 类。
import { Component } from '@angular/core'; @Component({ selector: 'app-root', styles: [` input.ng-invalid { border: 3px solid red; } input.ng-valid { border: 3px solid green; } ` ], template: ` <form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)"> <fieldset ngModelGroup="user"> <input type="text" required minlength="3" [(ngModel)]="username" #userName="ngModel"> <hr> <div *ngIf="userName.errors?.required">请您输入用户名</div> <div *ngIf="userName.errors?.minlength"> 用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}}，当前的长度为 {{userName.errors?.minlength.actualLength}} </div> <input type="password" required ngModel> </fieldset> <button type="submit">提交</button> <hr> {{loginForm.value | json}} </form> `, }) export class AppComponent { username = 'semlinker'; onSubmit(value) { console.dir(value); } }
第七节 - 表单控件的状态
表单控件除了 valid 状态外，还包含哪些状态？
在 Angular 中表单控件有以下 6 种状态，我们可以通过 #userName="ngModel" 方式获取 ngModel 对象，进而获取控件的状态信息。具体状态如下：
valid - 表单控件有效
invalid - 表单控件无效
pristine - 表单控件值未改变
dirty - 表单控件值已改变
touched - 表单控件已被访问过
untouched - 表单控件未被访问过
import { Component } from '@angular/core'; @Component({ selector: 'app-root', styles: [` input.ng-invalid { border: 3px solid red; } input.ng-valid { border: 3px solid green; } ` ], template: ` <form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)"> <fieldset ngModelGroup="user"> <input type="text" required minlength="3" [(ngModel)]="username" #userName="ngModel"> <hr> <p>Name控件的valid状态：{{userName.valid}} - 表示控件有效</p> <p>Name控件的invalid状态：{{userName.invalid}} - 表示控件无效</p> <p>Name控件的pristine状态：{{userName.pristine}} - 表示控件值未改变</p> <p>Name控件的dirty状态：{{userName.dirty}} - 表示控件值已改变</p> <p>Name控件的touched状态：{{userName.touched}} - 表示控件已被访问过</p> <p>Name控件的untouched状态：{{userName.untouched}} - 表示控件未被访问过</p> <div *ngIf="userName.errors?.required">请您输入用户名</div> <div *ngIf="userName.errors?.minlength"> 用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}}，当前的长度为 {{userName.errors?.minlength.actualLength}} </div> <input type="password" required ngModel> </fieldset> <button type="submit">提交</button> <hr> {{loginForm.value | json}} </form> `, }) export class AppComponent { username = 'semlinker'; onSubmit(value) { console.dir(value); } }
第八节 - 使用单选控件
如何添加单选控件？
在 Angular 中，我们通过 <input type="radio"> 方式添加单选控件。