小工具      在线工具  汉语词典  css  js  c++  java

Angular开发(二十四)-angular表单的校验

angular 额外说明

收录于:112天前

表单的校验,本文档中分为模板驱动和模型驱动表单

一、模板驱动的校验

  • 1、采用第三方的组件进行校验
  • 2、npm install ng2-validation --save
  • 3、配置app.module.ts

    import { FormsModule, ReactiveFormsModule } from '@angular/forms';
    import {CustomFormsModule} from "ng2-validation";
    ...
    imports: [
        FormsModule,
        CustomFormsModule,
        ReactiveFormsModule
      ],
    ...
  • 4、组件的ts文件

    private myForm1:any= {
        username:"",
        mobile:""
      };
  • 5、组件的html代码

    <form role="form" #myForm="ngForm">
        <div class="form-group">
            <label>用户名:</label>
            <input type="text" placeholder="请输入用户名" [(ngModel)]="myForm1.username" name="username" #username="ngModel" [rangeLength]="[5,9]" class="form-control" required />
            <p class="text-danger" *ngIf="username.errors?.rangeLength">输入字符长度在5-9之间</p>
        </div>
        <div class="form-group">
            <label>手机号码:</label>
            <input type="text" placeholder="请输入手机号码" class="form-control" [(ngModel)]="myForm1.mobile" name="mobile" #mobile="ngModel" phone="CN" [rangeLength]="[11,11]" />
            <p class="text-danger" *ngIf="mobile.errors?.phone || mobile.errors?.rangeLength">手机格式有误</p>
        </div>
        <div class="form-group">
            <input type="submit" class="btn btn-primary" value="提交" />
        </div>
    </form>
  • 6、想要更多的验证方式请到github博客上查找需要的
  • 7、运行效果
    这里写图片描述

二、模型驱动(响应式表单)的校验方式

  • 1、响应式表单不清楚的可以查看博客响应式表单
  • 2、组件的ts代码

    ...
    private myform2:FormGroup;
      constructor(private fb:FormBuilder) { }
    
      ngOnInit() {
        this.myform2 = this.fb.group({
          username1: ["",[Validators.required,Validators.minLength(3),Validators.maxLength(9)]],
          mobile1:["",[Validators.required,this.mobileValidator]]
        })
      }
      //定义一个手机号码的校验器
      mobileValidator(control:FormControl):any{
        var reg = /^1[34578]\d{
         9}$/;
        let valid = reg.test(control.value);
        //如果验证通过就返回null否则就返回手机号码格式有误
        return valid ? null:{moblie:"手机号码格式有误"};
      }
    ...
  • 3、组件的html代码

    <form role="form" [formGroup]="myform2">
        <div class="form-group">
            <label>用户名:</label>
            <input type="text" placeholder="请输入用户名" class="form-control" formControlName="username1" />
            <p [hidden]="myform2.get('username1').untouched || !myform2.hasError('required','username1')" class="text-danger">用户名必填</p>
            <p [hidden]="myform2.get('username1').untouched || (!myform2.hasError('minlength','username1') ? !myform2.hasError('maxlength','username1'):null)" class="text-danger">用户名长度有误</p>
        </div>
        <div class="form-group">
            <label>手机号码:</label>
            <input type="text" placeholder="请输入手机号码" class="form-control" formControlName="mobile1" />
            <p class="text-danger" [hidden]="myform2.get('mobile1').untouched || !myform2.hasError('required','mobile1')">手机号码必填</p>
            <p class="text-danger" [hidden]="myform2.get('mobile1').untouched || myform2.hasError('mobileValidator','mobile1')">手机号码格式有误</p>
        </div>
        <div class="form-group">
            <input type="submit" class="btn btn-success" value="提交" />
        </div>
    </form>
  • 4、样式文件

    .ng-invalid:not(form) { border: 1px solid #f00; }
    
    .ng-untouched:not(form) { border: 1px solid #ddd; }
  • 5、运行效果
    这里写图片描述

三、本节案例下载地址demo

. . .

相关推荐

额外说明

[Visual Studio 2022] 首次安装时发生致命错误 C1083:无法打开包含文件:“crtdbg.h”:没有这样的文件或目录

VS2022 包括的版本如下: Windows版本 Windows SDK版本 Windows 10 版本 1903 Windows 10 SDK 版本 1903 (10.0.18362.1) Windows 10 版本 2004 Windows 10

额外说明

leetcode109(有序链表转换为二叉搜索树)

给定一个单链表,其中的元素按升序排序,将其转换为高度平衡的二叉搜索树。 本题中,一个高度平衡二叉树是指一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过 1。 题解(一):将有序链表转换为二叉搜索树,其实就是将有序链表不断进行二分法二分的过程,其中

额外说明

Web 自动化神器 TestCafe — 页面基本操作篇

  前 言 Testcafe是基于node.js的框架,以操作简洁著称,是web自动化的神器 今天主要给大家介绍一下testcafe这个框架和页面元素交互的方法。 一、互动要求 使用 TestCafe 与元素进行交互操作,元素需满足以下条件:☟ 元素在

额外说明

完美解决 ImportError: Missing optional dependency ‘openpyxl‘. Use pip or conda to install openpyxl.

完美解决 ImportError: Missing optional dependency ‘openpyxl’. Use pip or conda to install openpyxl. 1. 问题描述 大家用 python 操作 excel,会遇到

额外说明

什么是死锁?(把死锁给大家讲明白,知道是什么,为什么用,怎么用)

3个方面回答 : 1.死锁是什么? 提供了几种理解的方式帮助大家更好的理解;如有疑问可提出; 死锁是一组相互竞争资源的线程因为他们之间得到互相等待导致“永久“阻塞的现象; (你等我 我等你 你不放我也不放 就导致“永久“阻塞的现象) 死锁是指两个或两个以

额外说明

DBeaver普通用户连接MySQL报错:Public Key Retrieval is not allowed

描述 全面弃用navicat,转向试用dbeaver-ce。今日登录一台生产数据库时,我使用root用户登录成功,测试同事试用test用户登录失败,他的报错提示:Public Key Retrieval is not allowed。我在本人电脑上试用t

额外说明

【C#】【源码】直接可用的远程桌面应用

【背景】 封闭环境无法拷贝外来的远程桌面软件,所以就直接自己用C#写一个。 【效果】 【说明】 本篇会给出完整的编程步骤,照着写就能拥有你自己的远程桌面应用,直接可以运行在局域网。 如果不想自己敲代码,也可以选择直接下载项目资源,解包后直接用VS2019

额外说明

Qunee for HTML5图形组件

一套基于HTML5的网络图组件 使用HTML5 Canvas技术,绘制清新、流畅的网络图,可用于社交网络图、拓扑图、流程图、地图等需求, JS组件封装,藏繁琐于简洁,轻松构建优雅的互联网应用与企业应用,让数据的在线可视化变得容易; 组件特点 轻巧、高性能

额外说明

推荐一个高效率的将Word转化为Pdf的通用接口,开发者免费可用

Word转换为Pdf很多软件都有页数限制,而且在很多页数的前提下面,转化效率比较低。同时对于很多商用的项目来说,可能每天需要大量的进行Word到Pdf的转化,今天就给大家提供一个高速接口,只需要将Word文件通过HTTP上传,就可以快速转化Pdf,下载即

额外说明

python读取csv文件,xlsx文件

一.python读取csv操作 假如csv文件名为:trainLabels.csv 路径为:/opt/trainLabels.csv csv文件内容为: 代码: '''整理数据集''' def read_csv_labels(fname):

ads via 小工具