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

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

 打印结果： 

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 = ['红色', '黄色', '蓝色];
    }