Angular表单处理

其他 2019-01-04 08:50:59 阅读次数: 0

1.模板式表单

template-form.component.html

<form #myForm="ngForm" (ngSubmit)="onsubmit(myForm.value)">
  <div>用户名：<input ngModel name="username" type="text"></div>
  <div>手机号：<input ngModel name="phone" type="text"></div>
  <div>邮编：<input type="number"></div>
  <div ngModelGroup="passwordsGroup">
    <div>密码：：<input ngModel name="password" type="password"></div>
    <div>确认密码：<input ngModel name="pconfirm" type="password"></div>
  </div>
  <button type="submit">注册</button>
</form>
<div>
  {{myForm.value | json}}
</div>

template-form.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-template-form',
  templateUrl: './template-form.component.html',
  styleUrls: ['./template-form.component.css']
})
export class TemplateFormComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
  onsubmit(value: any){
    console.log(value);
  }
}

2.响应式表单

1.

reactive-form.component.html

<form [formGroup]="formModel" (submit)="onSubmit()">
  <div formGroupName="dateRange">
    起始日期：<input type="date">
    截止日期：<input type="date">
  </div>
  <div>
    <ul>
      <li>
        <input type="text">
      </li>
    </ul>
    <button type="button">增加Email</button>
  </div>
  <button type="submit">保存</button>
</form>

reactive-form.component.ts

import { Component, OnInit } from '@angular/core';
import {FormArray, FormControl, FormGroup} from '@angular/forms';

@Component({
  selector: 'app-reactive-form',
  templateUrl: './reactive-form.component.html',
  styleUrls: ['./reactive-form.component.css']
})
export class ReactiveFormComponent implements OnInit {
  /*指定初始值 */
  username: FormControl = new FormControl('aaa');
  /*formModel:表示整个表单的数据*/
  formModel:FormGroup = new FormGroup({
    dateRange: new FormGroup({
      from: new FormControl(),
       to: new FormControl()
    })
  });
  emails: FormArray = new FormArray([
    new FormControl('[email protected]'),
    new FormControl('[email protected]')
  ])
  constructor() { }
  ngOnInit() {
  }
  onSubmit() {
    console.log(this.formModel.value);
  }
}

2.

reactive-regist.component.html

<form [formGroup]="formModel" (submit)="onSubmit()">
  <div>用户名：<input type="text" formControlName="username"></div>
  <div>手机号：<input type="text" formControlName="mobile"></div>
  <div formGroupName="passwordsGroup">
    <div>密码：：<input type="text" formControlName="password"></div>
    <div>确认密码：<input type="text" formControlName="pconfirm"></div>
  </div>
  <button type="submit">注册</button>
</form>

reactive-regist.component.ts

import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormControl, FormGroup} from "@angular/forms";

@Component({
  selector: 'app-reactive-regist',
  templateUrl: './reactive-regist.component.html',
  styleUrls: ['./reactive-regist.component.css']
})
export class ReactiveRegistComponent implements OnInit {
  formModel: FormGroup;
  /*1.new 关键字实例化表单模型的类*/
  /*constructor() {
    this.formModel = new FormGroup({
      username: new FormControl(),
      mobile: new FormControl(),
      passwordsGroup: new FormGroup({
        password: new FormControl(),
        pconfirm: new FormControl()
      })
    })
  }*/
  /*2.FormBuilder配置表单模型*/
  constructor(fb: FormBuilder) {
    this.formModel = fb.group({
      username: [''],
      mobile: [''],
      passwordsGroup: fb.group({
        password: [''],
        pconfirm: ['']
      })
    })
  }
  ngOnInit() {
  }
  onSubmit(){
    console.log(this.formModel.value);
  }
}

3.表单校验

3.1Angular校验器

xxxx（control：AbstractControl）：{ [key:string] :any} {
	Validators.xxx
	return null ;
}

3.2校验响应式表单

reactive-regist.component.ts

import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";

@Component({
  selector: 'app-reactive-regist',
  templateUrl: './reactive-regist.component.html',
  styleUrls: ['./reactive-regist.component.css']
})
export class ReactiveRegistComponent implements OnInit {
  formModel: FormGroup;
  /*2.FormBuilder配置表单模型*/
  constructor(fb: FormBuilder) {
    this.formModel = fb.group({
      username: ['', [Validators.required, Validators.minLength(6)]],
      mobile: [''],
      passwordsGroup: fb.group({
        password: [''],
        pconfirm: ['']
      })
    })
  }
  onSubmit(){
    let isValid: boolean = this.formModel.get("username").valid;
    console.log("username的校验结果是："+isValid);
    let errors: any = this.formModel.get("username").errors;
    console.log("username的错误信息是："+JSON.stringify(errors));
    console.log(this.formModel.value);
  }
  ngOnInit() {
  }
}

自定义校验器

创建文件夹：validator–》ts文件：validators.ts
validators.ts

/**
 * Created by Administrator on 2019/1/3/003.
 */
import {AbstractControl, FormControl, FormGroup} from "@angular/forms";
import {of} from 'rxjs';
import {delay} from 'rxjs/operators';
/*全局的typescript的函数*/
export function  mobileValidator(control: AbstractControl) :{ [key: string] :any} {
  var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
  let valid = myreg.test(control.value);
  console.log("mobile的校验结果是："+valid);
  return valid ? null : {mobile:true};
}
/*异步校验器：调用远程的服务校验表单的值，返回不是对象，是可观测的流*/
export function  mobileAsyncValidator(control: AbstractControl) :{ [key: string] :any} {
  var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
  let valid = myreg.test(control.value);
  console.log("mobile的校验结果是："+valid);
  return of(valid ? null : {mobile: true}).pipe(
    delay(5000)
  );
}
export function equalValidator(group:FormGroup): any {
  let password:FormControl = group.get("password") as FormControl;
  let pconfirm:FormControl = group.get("pconfirm") as FormControl;
  let valid:boolean = (password.value === pconfirm.value);
  console.log("密码校验结果是："+valid);
  return valid ? null : {equal: {describle:"密码和确认密码不匹配"}};
}

reactive-regist.component.ts

import { Component, OnInit } from '@angular/core';
import {AbstractControl, FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
import {equalValidator, mobileAsyncValidator, mobileValidator} from "../validator/validators";
@Component({
  selector: 'app-reactive-regist',
  templateUrl: './reactive-regist.component.html',
  styleUrls: ['./reactive-regist.component.css']
})
export class ReactiveRegistComponent implements OnInit {
  formModel: FormGroup;
  /*2.FormBuilder配置表单模型*/
  constructor(fb: FormBuilder) {
    this.formModel = fb.group({
      username: ['', [Validators.required, Validators.minLength(6)]],
      /*异步校验器可以作为formControl第三个构造函数传入模型*/
      mobile: ['', mobileValidator, mobileAsyncValidator],
      passwordsGroup: fb.group({
        password: ['', Validators.minLength(6)],
        pconfirm: ['']
      },{validator: equalValidator})
    })
  }
  onSubmit(){
    let isValid: boolean = this.formModel.get("username").valid;
    console.log("username的校验结果是："+isValid);
    let errors: any = this.formModel.get("username").errors;
    console.log("username的错误信息是："+JSON.stringify(errors));
    if(this.formModel.valid){
      /*全部通过验证*/
      console.log(this.formModel.value);
    }
  }
  ngOnInit() {
  }
}

reactive-regist.component.html

<form [formGroup]="formModel" (submit)="onSubmit()">
  <div>用户名：<input type="text" formControlName="username"></div>
  <div [hidden]="!formModel.hasError('required','username')">
    用户名是必填项
  </div>
  <div [hidden]="!formModel.hasError('minlength','username')">
    用户名最小长度是6
  </div>
  <div>手机号：<input type="text" formControlName="mobile"></div>
  <div [hidden]="!formModel.hasError('mobile','mobile')">
    请输入正确的手机号
  </div>
  <div formGroupName="passwordsGroup">
    <div>密码：：<input type="text" formControlName="password"></div>
    <div [hidden]="!formModel.hasError('minlength',['passwordsGroup','password'])">
      密码最小长度是6
    </div>
    <div>确认密码：<input type="text" formControlName="pconfirm"></div>
    <div [hidden]="!formModel.hasError('equal','passwordsGroup')">
      {{formModel.getError('equal','passwordsGroup')?.describle}}
    </div>
  </div>
  <button type="submit">注册</button>
</form>
<!--异步校验器-->
<div>
  {{formModel.status}}
</div>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

扫描二维码关注公众号，回复： 4770076 查看本文章

状态字段

touched、untouched
是否获取过焦点

<div>用户名：<input type="text" formControlName="username"></div>
  <div [hidden]="formModel.get('username').valid || formModel.get('username').untouched">
    <div [hidden]="!formModel.hasError('required','username')">
      用户名是必填项
    </div>
    <div [hidden]="!formModel.hasError('minlength','username')">
      用户名最小长度是6
    </div>
  </div>

pristine、dirty
是否改变过，修改过false，true

<div>手机号：<input type="text" formControlName="mobile"></div>
  <div [hidden]="formModel.get('mobile').valid || formModel.get('mobile').pristine">
    <div [hidden]="!formModel.hasError('mobile','mobile')">
        请输入正确的手机号
    </div>
  </div>

pending

<div>手机号：<input type="text" formControlName="mobile"></div>
  <div [hidden]="formModel.get('mobile').valid || formModel.get('mobile').pristine">
    <div [hidden]="!formModel.hasError('mobile','mobile')">
        请输入正确的手机号
    </div>
  </div>
  <div [hidden]="!formModel.get('mobile').pending">
    正在校验手机号合法性
  </div>

字段处于异步校验时，true

3.3校验模板式表单

1.生成指令
–> ng g directive directives/mmobileValidator
–> ng g directive directives/equalValidator
mmobileValidator.directive.ts

import { Directive } from '@angular/core';
import {NG_VALIDATORS} from "@angular/forms";
import {mobileValidator} from "../validator/validators";
@Directive({
  selector: '[mobile]',
  providers: [{provide: NG_VALIDATORS, useValue: mobileValidator, multi: true}]
})
export class MmobileValidatorDirective {
  constructor() { }
}

equalValidator.directive.ts

import { Directive } from '@angular/core';
import {NG_VALIDATORS} from "@angular/forms";
import {equalValidator} from "../validator/validators";
@Directive({
  selector: '[equal]',
  providers: [{provide: NG_VALIDATORS, useValue: equalValidator, multi: true}]
})
export class EqualValidatorDirective {
  constructor() { }
}

template-form.component.ts

import { Component, OnInit } from '@angular/core';
import {NgForm} from "@angular/forms";

@Component({
  selector: 'app-template-form',
  templateUrl: './template-form.component.html',
  styleUrls: ['./template-form.component.css']
})
export class TemplateFormComponent implements OnInit {
  mobileValid: boolean =true;
  mobileUntouched: boolean=true;
  constructor() { }

  ngOnInit() {
  }
  onsubmit(value: any,valid: boolean){
    /*console.log(value);
    console.log(valid);*/
  }
  onMobileInput(form: NgForm){
    if(form){
      this.mobileValid = form.form.get("mobile").valid;
      this.mobileUntouched = form.form.get("mobile").untouched;
    }
  }
}

template-form.component.html

<!--novalidate：不要启动浏览器默认的表单校验-->
<form #myForm="ngForm" (ngSubmit)="onsubmit(myForm.value,myForm.valid)" novalidate>
  <div>用户名：<input ngModel required minlength="6" name="username" type="text" (input)="onMobileInput(myForm)"></div>
  <div [hidden]="mobileValid || mobileUntouched">
    <div [hidden]="!myForm.form.hasError('required','username')">
      用户名是必填项
    </div>
    <div [hidden]="!myForm.form.hasError('minlength','username')">
      用户名最小长度是6
    </div>
  </div>
  <div>手机号：<input ngModel mobile name="mobile" type="text"></div>
  <div [hidden]="!myForm.form.hasError('mobile','mobile')">
    请输入正确的手机号
  </div>
  <div>邮编：<input type="number"></div>
  <div ngModelGroup="passwordsGroup" equal>
    <div>密码：：<input ngModel minlength="6" name="password" type="password"></div>
    <div [hidden]="!myForm.form.hasError('minlength',['passwordsGroup','password'])">
      密码最小长度是6
    </div>
    <div>确认密码：<input ngModel name="pconfirm" type="password"></div>
    <div [hidden]="!myForm.form.hasError('equal','passwordsGroup')">
      {{myForm.form.getError('equal','passwordsGroup')?.describle}}
    </div>
  </div>
  <button type="submit">注册</button>
</form>
<div>
  <!--{{myForm.value | json}}-->
</div>

猜你喜欢

转载自blog.csdn.net/weixin_44174685/article/details/85334482
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
周排行
Python环境安装与基础语法（1）——计算机基础知识
IMU预积分
ADAS中的LDW、FCW、BSD、LCA、ACC、AEB、APA、DMS代表的含义
B站笔试两道题
skyeye arm 硬件虚拟机环境的搭建
Web前端静态页面示例
数组-合并排序数组 II-简单
springcloud之版本问题启动报错
面向对象-------------匿名对象(六)
输入URL到页面呈现中间发生了什么？
每日归档
更多
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022