极客angular知识分享（7）-- 模型表单

基于模型的表单

---

 

定义

在代码中定义表单以及验证细节

 

实现

1. 引入相关依赖模块

    import { NgModule } from '@angular/core';
    import { ModuleformComponent } from './moduleform.component';
    import { BrowserModule } from '../../../node_modules/@angular/platform-browser';
    import { FormsModule, ReactiveFormsModule } from '../../../node_modules/@angular/forms';
   
    @NgModule({
        imports: [
            BrowserModule,
            FormsModule,
            ReactiveFormsModule // 1.导入模型表单的三个依赖模块
        ],
        declarations: [ModuleformComponent]
    })
    export class ModuleformModule { }
   

2. 自定义一个FormControl和一个FormGroup

   FormControl 代表form的一个控件，并包含自己的属性以及该自定义表单中包含的所有验证错误消息的打印或输出

   FormGroup 代表整个form表单，包括每个控件的名称，以及控件的初始化属性和包含的验证机制

   import { FormControl, FormGroup, Validators } from "@angular/forms";
    import { LimitValidator } from "./limit-validator";
   
    // 2. 控件模型（也可以不实现）
    export class UserControl extends FormControl {
        modelProperty:string;
        constructor(property:string, value:any, validator:any){
            super(value, validator);
            this.modelProperty = property;
        }
        // 控件验证消息
        getValidatorMessages(){
            let msg:string[] = [];
            if(this.errors){
                for (let error in this.errors) {
                switch (error) {
                    case "required":
                    msg.push(`You must enter a ${this.modelProperty}`);
                    break;
                    case "minlength":
                    msg.push(`最小字符个数：${this.errors['minlength'].requiredLength}`);
                    break;
                    case "pattern":
                    msg.push(`${this.modelProperty}包含非法字符`);
                    break;
                    case "maxlength":
                    msg.push(`最大字符个数：${this.errors['maxlength'].requiredLength}`);
                    break;
                    // 加入自定义验证消息
                    case "limit":
                    msg.push(`限制最大值：${this.errors['limit'].limit}`);
                    break;
                    default:
                    break;
                }
                }
            }
            return msg;
        }
    }
   
    // 3. 表单模型
    export class UserFormGroup extends FormGroup{
        // 初始化表单
        constructor(){
            super({
                username:new UserControl('username', '', Validators.compose([
                    Validators.minLength(5),
                    Validators.required,
                    Validators.pattern('^[A-Za-z ]+$'),
                    Validators.maxLength(10)
                ])),
                password:new UserControl('password', '', Validators.compose([
                    Validators.minLength(5),
                    Validators.required,
                    Validators.pattern('^[1-9]+$'),
                    Validators.maxLength(10),
   
                    // 加入自定义验证
                    LimitValidator.limit(100)
                ]))
            })
        }
   
        // 将控件转换为自定义control
        get userControls():UserControl[]{
            return Object.keys(this.controls).map(key=>
                this.controls[key] as UserControl
            )
        }
   
        // 验证整个表单消息
        getValidatorMessage():string[]{
            let message:string[] = []
            this.userControls.forEach(c=>c.getValidatorMessages().forEach(m=>message.push(m)))
            return message;
        }
    }
   

3. 组件中初始化表单

    import { Component, OnInit } from '@angular/core';
    import { UserFormGroup } from './model';
    import { NgForm } from '@angular/forms';
   
    @Component({
    selector: 'store-moduleform',
    templateUrl: './moduleform.component.html',
    styleUrls: ['./moduleform.component.css']
    })
    export class ModuleformComponent implements OnInit {
   
    // 实例化form
    userForm:UserFormGroup=new UserFormGroup();
   
    constructor() { }
   
    ngOnInit() {
    }
   
    formSubmited:boolean = false;
    submit(myform:NgForm){
        this.formSubmited = true;
        if(myform.valid){
        console.log(myform.value)
        myform.reset();
        this.formSubmited = false;
        }
    }
   }
   

4. 模板中绑定表单组件

    <!-- 表单验证 -->
    <form novalidate [formGroup]="userForm" (ngSubmit)="submit(userForm)">
    <div class="bg-danger" *ngIf="formSubmited && userForm.invalid">
        表单验证存在问题：
        <li *ngFor="let error of userForm.getValidatorMessage()">
        {{error}}
        </li>
    </div>
    <div class="form-group">
        <label for="username">姓名：</label>
        <input type="text" class="form-control" name="username" id="username" formControlName="username" />
        <div class="bg-danger" *ngIf="(formSubmited || userForm.controls['username'].dirty) && userForm.controls['username'].invalid">
        姓名验证存在问题：
        <li *ngFor="let error of userForm.controls['username'].getValidatorMessages()">
            {{error}}
        </li>
        </div>
    </div>
   
    <div class="form-group">
        <label for="password">密码</label>
        <input type="text" class="form-control" name="password" id="username" formControlName="password" />
        <div class="bg-danger" *ngIf="(formSubmited || userForm.controls['password'].dirty) && userForm.controls['password'].invalid">
        密码验证存在问题：
        <li *ngFor="let error of userForm.controls['password'].getValidatorMessages()">
            {{error}}
        </li>
        </div>
    </div>
   
    <button class="btn btn-primary" type="submit">提交</button>
    </form>
   

 

自定义验证规则

1. 自定义一个验证规则类

   import { FormControl } from "@angular/forms";
   
    // 声明一个自定义验证函数
    export class LimitValidator {
   
        static limit(limit:number){
            return(control:FormControl):{[key:string]:any}=>{
                let val = Number(control.value);
                if(val != NaN && val > limit){
                    return {"limit":{"limit":limit, "actualValue":val}}
                }else{
                    return null;
                }
   
            }
        }
    }
   

2. 使用验证规则

   // 参考上面的UserFormGruop类
   password:new UserControl('password', '', Validators.compose([
                Validators.minLength(5),
                Validators.required,
                Validators.pattern('^[1-9]+$'),
                Validators.maxLength(10),
   
                // 加入自定义验证
                LimitValidator.limit(100)
            ]))
   

3. 验证消息

   // 参考UserControl类
    case "limit":
        msg.push(`限制最大值：${this.errors['limit'].limit}`);
        break;