ng2表单 (摘自《揭秘Angular2》）

冷不防 2022-05-06 00:57 269阅读 0赞

原文出处：[https://www.jianshu.com/p/6e34c13138e7][https_www.jianshu.com_p_6e34c13138e7]|

angular提供了模板驱动和模型驱动两种方式来构建表单。模板驱动模式使用模板表单内置指令、内置校验的方式来构建表单；模型驱动模式采用自定义表单、自定义校验的方式来构建表单。

## 表单指令 ##

NgForm指令

`NgForm`指令是表单的控制中心，负责处理表单内的页面逻辑，为普通的表单元素扩充了许多额外的特性，所有的表单指令都需要在`NgForm`指令内部才能正常运行。  
首先要在根模块中添加`FormsModule`。

import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule } from '@angular/forms';
    import { AppComponent } from './app.component';
    import { FormComponent } from './form.component';
    @NgModule({
        imports:[
            BrowserModule,
            FormsModule  //导入FormsModule
        ],
        declarations:[
            AppComponent,
            FormComponent
        ],
        bootstrap:[AppComponent]
    })
    export class AppModule {}

可以不用在模板中显式的使用`NgForm`指令，因为添加了`FormsModule`模块后，angular模板在编译解析时，遇到`<form>`标签会自动创建一个`NgForm`指令并且将其添加到该`<form>`标签上。

NgModel指令

angular表单支持单向和双向数据绑定，表单的单向数据绑定使用`[ngModel]`，双向数据绑定使用`[(ngModel)]`。

在控件中使用`NgModel`属性绑定，必须给该控件添加`name`属性，否则会报错。因为`NgForm`指令会为表单建立一个控件对象`FormControl`的集合，以此来作为表单控件的容器。控件的`NgModel`属性绑定会以`name`作为唯一标识符来注册并生成一个`FormControl`，将其加入到`FormControl`的集合中。

常用的表单控件：

单选框：单选框控件实现双向数据绑定，同一组单选框控件的所有`[(ngModel)]`属性都必须绑定同一个模型数据，且`name`属性名也必须相同。

<input type="radio" name="sex" [(ngModel)]="curContact.sex" value="female" />女
    <input type="radio" name="sex" [(ngModel)]="curContact.sex" value="male" />男

当单击选项为“女”的单选框，`curContact.sex`会被赋值为`female`，若单击“男”单选框，则所对应的值为`male`。  
复选框：复选框控件用来表示该表单复选框是否被选中，其中`[(ngModel)]`属性绑定的是一个布尔值。

<input type="checkbox" name="lock" [(ngModel)]="curContact.lock" />禁用

如果复选框被选中，则`curContact.lock`的值为`true`，否则为`false`。  
单选下拉框：单选下拉框控件的双向数据绑定需结合`option`元素绑定的值来实现。`option`选项的元素属性的绑定目标有两种，分别为`value`和`ngValue`。当在`option`元素中使用`value`绑定数据时，其返回值类型是基本数据类型；当使用`ngValue`绑定数据时，其返回值类型是对象数据类型。

//定义下拉框所需所需数据
    export class FormComponent {
        interests:any[]=[
            {value:'reading',display:'阅读'},
            {value:'traveling',display:'旅游'},
            {value:'sport',display:'运动'}
        ];
    }
    
    <select name="interestValue" [(ngModel)]="curContact.interestValue">
        <option *ngFor="let interest of interests" [value]="interest.value">
            {
       {interest.display}}
        </option>
    </select>

例子中，使用`[value]`来绑定下拉选项的`value`属性值，如果选中下拉选项框中的“旅游”项，那么`curContact.interestValue`的值将变为`traveling`。  
单选框被选中后也可以返回对象类型的数据。

<select name="interestObj" [(ngModel)]="curContact.interestObj">
        <option *ngFor="let interest of interests" [ngValue]="interest">
            {
       {interest.display}}
        </option>
    </select>

当选中某个项目后，该下拉框最终返回一个`Object`类型的对象数据。如选中“旅游”项，则`curContact.interestObj`的值为`{value:'traveling',display:'旅游'}`。  
多选下拉框：实现了下拉选择多个选项的功能，返回的数据是一个由所有被选项数据组成的数组。

<select multiple name="interestMul" [(ngModel)]="curContact.interestMul">
        <option *ngFor="let interest of interests" [value]="interest.value">
            {
       {interest.display}}
        </option>
    </select>

多选下拉框使用`[value]`来绑定下拉选项的`value`属性值，如果在多选下拉框中选中“旅游”和“运动”两项，则`curContact.interestMul`返回值为`["traveling","sport"]`。  
多选下拉框还可以使用`[ngValue]`来绑定下拉选项的`value`属性值，如果在多选下拉框中选中“旅游”和“运动”两项，那么`curContact.interestMul`返回的数组对象为`[{value:'traveling',display:'旅游'},{value:'sport',display:'运动'}]`。

模板局部变量

模板局部变量是模板中对DOM元素或指令（包括组件）的引用，可以使用在当前元素、兄弟元素或任何子元素中。

DOM元素局部变量

若在标签元素中定义DOM元素局部变量，只需在其局部变量名前加上`#`或用`ref-`前缀。

<li>
        <label for="name">姓名：</label>
        <input type="text" #contactName name="contactName" id="contactName" />
        <input type="number" ref-telNum name="telNum" id="telNum" />
        <p>{
       {contactName.value}}--{
       {telNum.value}}</p>
    </li>

angular会自动把局部变量设置为对当前DOM元素对象的引用，如上面的局部变量`contactName`引用的是`document.getElementById("contactName")`对象。在模板中定义局部变量后，可以直接在模板的其他元素中使用该元素的DOM属性，如`contactName.value`和`telNum.value`。

表单指令局部变量

表单指令也可以定义局部变量，其引用方式与DOM元素局部变量的引用方式不同。表单指令的局部变量在定义时需手动初始化为特定指令的代表值，最终解析后会被赋值为表单指令实例对象的引用。

NgForm表单局部变量

局部变量`contactForm`为`NgForm`指令实例对象的引用，可以在模板中读取`NgForm`实例对象的属性值，如追踪表单的`valid`属性状态。当被包含的所有控件都有效时，`contactForm.valid`的值为`true`，否则为`false`。在控件中添加`ngModel`和`name`属性后，若往姓名控件中输入“李四”，电话控件输入“123456789”，则`contactForm.value`的值为：

{
        name:"李四",
        telNum:"123456789"
    }

NgModel控件局部变量

<input type="text" name="contactName" [(ngModel)]="curContact.name"
        #contactName="ngModel" />
    <p>{
       {contactName.valid}}</p>

局部变量`contactName`是对`NgModel`指令实例对象的引用，可以在模板中读取`NgModel`实例对象的属性值，如通过`contactName.valid`可追踪控件状态、表单校验不通过时提示错误信息。

表单状态

表单`NgForm`和`NgNodel`指令都可以用于追踪表单状态来实现数据校验。表单`NgForm`和`NgModel`指令都有五个表示状态的属性，属性值都为布尔类型，并都可通过对应的局部变量获取。`NgForm`追踪的是整个表单控件的状态，`NgModel`追踪的是其所在表单控件的状态。

![Image 1][]

表单状态属性语义表

NgModelGroup指令

`NgModelGroup`指令可以对表单输入内容进行分组，方便我们在语义上区分不同类型的输入。

`concatForm.value`的值为：

{
        nameGourp:{
            firstname:'',
            lastname:''
        },
        addressGroup:{
            street:'',
            zip:'',
            city:''
        }
    }

`NgModelGroup`实例对象的`valid`属性可以单独校验其所在分组控件的输入是否有效。如上例中只有当`curContact.firstname`、`curContact.lastname`输入都有效时，局部变量`nameGroup.valid`才会变成`true`，否则为`false`。

ngSubmit事件

`ngSubmit`事件可以响应表单里类型为`submit`的按钮操作，并负责控制表单的提交流程。当按钮被单机后，会触发表单的`ngSubmit`事件。

<form #contactForm="ngForm" (ngSubmit)="doSubmit(contactForm.value)">
        <li class="form-group">
            <button type="submit" class="btn btn-default" [disabled]="!contactForm.valid">添加</button>
            <button type="reset" class="btn btn-default">重置</button>
        </li>
    </form>
    
    export class FormComponent{
        doSubmit(formValue:any){
            //处理表单数据并提交
        }
    }

`ngSubmit`事件的类型是`EventEmitter`。当提交按钮被点击后，首先执行表单原生的`onSubmit`事件，接着执行`FormComponent`组件中定义的`doSubmit()`方法，该方法接收`contactForm.value`的值作为参数传入，并对传入的数据进行处理。

## 自定义表单样式 ##

`NgModel`指令不仅能追踪表单控件的状态，还会根据表单控件的状态使用对应的CSS状态类来更新表单控件的类名。表单控件包括6个CSS状态类。

![Image 1][]

控件CSS状态类名

表单控件的CSS类名会根据表单控件状态变化而变化。

.ng-valid[required]{
        border-left:5px solid #0f0;
    }
    .ng-valid{
        border-left:5px solid #f00;
    }

还可结合控件的状态属性`valid`、`pristine`、`dirty`、`touched`、`untouched`等来添加有用的消息提示，以此来对用户进行有效的引导。

<div class="form-group">
        <label for="contactName">姓名：</label>
        <input type="type" class="form-control" minlength=3 maxlength=10
            [(ngModel)]="curContact.name" name="contactName"
            #contactName="ngModel" required />
        <p [hidden]="contactName.valid||contactName.pristine" class="alert alert-invalid">
            用户名长度3-10个字符
        </p>
    </div>

## 表单校验 ##

表单内置校验

angular支持的表单内置校验包括：

*  required：判断表单控件值是否为空
 *  minlength：判断表单控件值的最小长度
 *  maxlength：判断表单控件值的最大长度
 *  pattern：判断表单控件值的匹配规则

可以在`<form>`标签中添加`novalidate`属性来屏蔽HTML的拦截校验。

表单自定义校验

创建自定义校验

下面定义一个用户名的校验器，校验规则为：用户名必须是邮箱、手机号码的格式。

//validate-username.ts
    import { FormControl } from '@angular/forms';
    const EMAIL_REGEXP=new RegExp("[a-z0-9]+@[a-z0-9]+.com");
    const TEL_REGEXP=new RegExp("1[0-9]{10}");
    export function validateUserName(c:FormControl){
        return (EMAIL_REGEXP.test(c.value)||TEL_REGEXP.test(c.value))?null:{
            userName:{
                valid:false,
                errorMsg:'用户名必须是手机号或邮箱帐号'
            }
        }
    }

自定义校验函数传入的参数是`FormControl`类，通过对`FormControl`的`value`值进行校验处理，返回校验结果。

使用自定义校验

使用模型驱动方式构建表单，需在表单组件所在的模块代码中导入`ReactiveFormsModule`，并在模块的`@NgModule`元数据`imports`数组中加入`ReactiveFormsModule`。

import { ReactiveFormsModule } from '@angular/forms';
    import { FormComponent } from './form.component';
    import { AppComponent } from './app.component';
    @NgModule({
        imports:[BrowserModule,ReactiveFormsModule],
        declarations:[AppComponent,FormComponent],
        bootstrap:[AppComponent]
    })
    export class AppModule {}

导入`ReactiveFormsModule`后，可在表单组件`FormComponent`中使用模型驱动方式构建表单。

import { Component } from '@angular/core';
    import { FormGroup,FormControl } from '@angular/forms';
    import { validateUserName } from './validate-username';
    @Component({
        selector:'add-contact',
        template:`
            <form [formGroup]="customForm">
                <label>姓名：</label>
                <input type="text" formControlName="customName" />
            </form>
        `
    })
    export class FormComponent{
        customForm=new FormGroup({
            customName:new FormControl('',validateUserName)
        });
    }

在构建`FormControl`实例对象`customName`时传入的参数中，第一个参数为控件返回值的初始值，第二个参数为该控件的校验配置方法。  
此外，校验配置可以使用`Validators`的内置校验，如`Validators.required()`等，这与直接在表单控件元素中添加`required`属性效果一致。使用`Validators`内置校验，需先从`@angular/forms`导入`Validators`。

import { Validators } from '@angular/forms';
    customForm=new FormGroup({
        customName:new FormControl('',Validators.minLength(4))
    });

如果需要在一个表单中添加多个校验器，可以在校验配置参数中使用数组，数组元素为对应的校验方法。

customForm=new FormGroup({
        customName:new FormControl('',[Validators.minLength(4),ValidateUserName])
    });

小礼物走一走，来简书关注我

作者：oWSQo  
链接：https://www.jianshu.com/p/6e34c13138e7  
來源：简书  
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

[https_www.jianshu.com_p_6e34c13138e7]: https://www.jianshu.com/p/6e34c13138e7
[Image 1]: