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

注：涉及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 = ['红色', '黄色', '蓝色];

     }

巴特西