angularcli 第五篇（输入框、表单处理）

本文参考：Angular4 表单快速入门

注：涉及input表单时要在AppComponent中引入 FormsModule模块:    

import{ FormsModule } from '@angular/forms';        @NgModule({ imports: [BrowserModule, FormsModule],})

目录：

1、在 Angular 表单中，通过 [(ngModel)]="username" 指令来实现数据双向绑定

2、添加简单的验证功能

3、显示表单验证失败的错误信息

4、创建表单（添加name属性）

5、获取表单提交的值

6、对表单输入内容进行分组  ngModelGroup

7、为表单的验证状态添加样式信息

8、为表单的验证状态添加样式信息

9、使用单选控件

10、使用多选控件

11、为多选控件添加必填验证

<!-- 下面的代码均是html中，同时在typescript中要定义username的初始值 -->
username = 'semlinker';

1、简单的输入框（双向绑定）

在angular表单中通过 ngModel 指令来实现双向绑定。

 <!-- 1、在 Angular 表单中，通过 [(ngModel)]="username" 指令来实现数据双向绑定 -->

 <input type="text" name="111" [(ngModel)]="username">
 {{username}}   <!-- 获取输入框中输入的值 -->

2、表单验证功能

（1）目前 Angular 支持的内建 validators 如下：

• • required - 表单控件值是必填的

  • email - 表单控件值的格式是 email

  • minlength - 表单控件值的最小长度

  • maxlength - 表单控件值的最大长度

  • pattern - 表单控件的值需匹配 pattern 对应的模式

（2）如何判断表单控件是否通过验证？

在 Angular 中，我们可以通过  #userName="ngModel" 方式获取 ngModel 对象，然后通过  userName.valid 判断表单控件是否通过验证。

 <!-- 2、添加简单的验证功能 -->
 <input type="text" required [(ngModel)]="username" #userName="ngModel">{{userName.valid}}

3、显示验证失败的错误信息

在 Angular 中，可以通过 #userName="ngModel" 方式获取 ngModel 对象，然后通过该对象的 errors 属性，来获取对应验证规则 (如 required, minlength 等) 的验证状态。

 <!-- 3、显示表单验证失败的错误信息 -->
     <input type="text" required minlength="3" [(ngModel)]="username" #userName="ngModel">     <!-- 必填、最小长度为3 -->
     <div *ngIf="userName.errors?.required">请您输入用户名</div>                                     <!-- 输入框为空时提示“请输入用户名” -->
     <div *ngIf="userName.errors?.minlength">                                                      <!-- 长度小于最小长度时提示“用户名长度必须大于xx，当前长度xx” -->
         用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}}，当前的长度为{{userName.errors?.minlength.actualLength}}
     </div>

4、创建表单

使用<form> 标签来创建表单，一定要注意在使用 <form> 标签后，我们的 input 输入框，必须添加 name 属性。

 <!-- 4、创建表单（添加name属性） -->
   <form>
      <input name="userName" type="text" required minlength="3"[(ngModel)]="username" #userName="ngModel">
      <div *ngIf="userName.errors?.required">请您输入用户名</div>
      <div *ngIf="userName.errors?.minlength">
          用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}}，当前的长度为{{userName.errors?.minlength.actualLength}}
      </div>
      <button type="submit">提交</button>
   </form>

5、获取表单提交的值

在 Angular 中，我们可以通过 #loginForm="ngForm" 方式获取 ngForm 对象，然后通过 loginForm.value 来获取表单的值。

 <!-- 5、获取表单提交的值 -->
    <form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
      <input type="text" required minlength="3" name="username" [(ngModel)]="username" #userName="ngModel">
      <div *ngIf="userName.errors?.required">请您输入用户名</div>
      <div *ngIf="userName.errors?.minlength">
          用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}}，当前的长度为{{userName.errors?.minlength.actualLength}}
      </div>
      <button type="submit">提交</button>
      {{loginForm.value | json}}
    </form>
 　　<!-- typescript的内容 -->
    export class AppComponent {
    username = 'semlinker';

15    onSubmit(value) {
16      console.log(value); //打印出来是输入框的值
17    }

打印结果： 

6、对表单输入内容进行分组  ngModelGroup

ngModelGroup 指令是 Angular 表单中提供的另一特殊指令，可以对表单输入内容进行分组，方便我们在语义上区分不同性质的输入。

例如联系人的信息包括姓名及住址，现在需对姓名和住址进行精细化信息收集，姓名可精细化成姓和名字，地址可精细化成城市、区、街等。

 <!-- 6、对表单输入内容进行分组  ngModelGroup -->
 <form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm.value)">
     <fieldset ngModelGroup="user">
         <input type="text" required minlength="3" name="username" [(ngModel)]="username" #userName="ngModel">
         <div *ngIf="userName.errors?.required">请您输入用户名</div>
         <div *ngIf="userName.errors?.minlength">
             用户名的长度必须大于 {{userName.errors?.minlength.requiredLength}}，当前的长度为 {{userName.errors?.minlength.actualLength}}
         </div>
         <input type="password" ngModel name="password">
     </fieldset>
     <button type="submit">提交</button>
     {{loginForm.value | json}}
 </form>

 　<!-- typescript -->
 export class AppComponent {
   username = 'semlinker';

   onSubmit(value) {
     console.dir(value);
   }
 }

以上代码成功运行后，{{loginForm.value | json}} 和控制台的输出结果：{ "user": { "username": "semlinker", "password": "123" } }

7、为表单的验证状态添加样式信息

在 Angular 表单中，若验证通过则会在表单控件上添加 ng-valid 类，若验证失败则会在表单控件上添加 ng-invalid 类。

 <!-- 7、为表单的验证状态添加样式信息 -->
2 <!-- 在上例的基础上添加 css 代码 -->
  　　
     input.ng-invalid {
         border: 3px solid red;
     }
     input.ng-valid {
         border: 3px solid green;
     }

8、表单控件的状态

在 Angular 中可以通过   #userName="ngModel" 方式获取  ngModel 对象，进而获取控件的状态信息。

表单控件有以下 6 种状态：

• • valid - 表单控件有效

  • invalid - 表单控件无效

  • pristine - 表单控件值未改变

  • dirty - 表单控件值已改变

  • touched - 表单控件已被访问过

  • untouched - 表单控件未被访问过

 <!-- 8、为表单的验证状态添加样式信息 -->
 　　<input type="text"  [(ngModel)]="username"  #userName="ngModel">

 　　<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>

9、使用单选控件

在 Angular 中，我们通过 <input name="***" type="radio"> 方式添加单选控件。

 <!-- 9、使用单选控件 -->
     <form #loginForm="ngForm">
         <div *ngFor="let color of colors;">
             <input [attr.id]="color" name="color" ngModel required [value]="color" type="radio">
             <label [attr.for]="color">{{color}}</label>
         </div>
         {{loginForm.value | json}}
       </form>

       <!-- typescript -->
       export class AppComponent {
         colors = ['红色', '黄色', '蓝色];
     }

9    <p>Name控件的untouched状态：{{userName.untouched}} - 表示控件未被访问过</p>

10、使用多选控件

在 Angular 中，通过 <select name="***"> 方式添加多选控件。

 <!-- 10、使用多选控件 -->
     <form #loginForm="ngForm">
         <select name="color" [ngModel]="colors[0]">
             <option *ngFor="let color of colors;" [value]="color">
                 {{color}}
             </option>
         </select>
         {{loginForm.value | json}}
     </form>

     <!-- typescript -->
       export class AppComponent {
         colors = ['红色', '黄色', '蓝色];
     }

11、为多选控件添加必填验证

 <!-- 11、为多选控件添加必填验证 -->
     <form #loginForm="ngForm">
         <div>
             <select name="color" [ngModel]="colors[0]"  required>
                 <option *ngFor="let color of colors;" [value]="color">
                     {{color}}
                 </option>
             </select>
             <label></label>
         </div>
         {{loginForm.value | json}}
     </form>

     <!-- css -->
     select.ng-invalid + label:after {
      content: '<-- 请做出选择!'
     }

     <!-- typescript -->
       export class AppComponent {
         colors = ['红色', '黄色', '蓝色];
     }