Angular服务管道表单校验

Posted 2022-08-09 公众号_前端每日技巧

服务

在ng6中，功能就是服务，使用什么功能就要引入什么服务

我们要操作指令所在的DOM元素，我们就要引入ElementRef服务

是内置的服务，可以直接引入

为了我们能够在组件中使用服务，我们要使用参数注入的技术，将服务注入到组件中

参数注入

参数注入技术，颠覆我们对函数的认识，

一个函数中有什么可用的参数，不是函数执行的时候说的算，是在函数定义的时候说的算，函数定义的时候，定义了什么形参，函数中就有什么数据。这样就是通过函数的形参，向函数体中注入了数据，这个技术就叫参数注入技术

在ng6中，我们可以通过为形参定义类型的语法，将服务注入到构造函数中，

注意：只有构造函数可以使用参数注入技术，其他的方法不能使用

存储服务

存储服务需要三步

第一步 声明存储服务的属性名称，可以用服务类约束类型

第二步 使用参数注入技术，在构造函数中，注入服务

第三步 在构造函数中，通过this，存储服务

参数注入语法糖

ts提供了很多关键字，如public，private，protected等，

我们可以通过public，private，protected关键字，作为注入语法糖，直接将服务注入到构造函数中，并存储在实例化对象上。

ElementRef

该服务提供了一个属性，nativeElement,代表该容器元素，是一个源生的DOM对象，操作它需要使用源生的DOM API。

监听数据改变

我们可以通过ngOnChanges生命周期方法，来监听数据的改变。再更新视图

举例：

export class ColorDirective 
    // 5 接收数据
    @Input() appColor:string;
    // // 1 声明存储服务的变量
    // // el;
    // el:ElementRef;
    // // 2 参数中注入服务
    // constructor(el: ElementRef) 
        // // 3 构造函数中，存储服务
        // this.el = el;
        // // 6 使用数据
        // console.log(this, arguments)
    // 
    // 使用参数注入语法糖
    constructor(public el: ElementRef) 
        // constructor(private el: ElementRef) 
        // constructor(protected el: ElementRef) 
        // console.log(333, this)
        console.log(this.appColor)
        // 改变颜色
        // el.nativeElement.style.color = this.appColor;
    
    // 数据改变
    ngOnChanges() 
        // 除了构造函数，其他的函数，都不能参数注入
        this.el.nativeElement.style.color = this.appColor;
    

管道

管道就是vue中的过滤器，

管道可以在渲染模块的时候，处理渲染的数据

ng6内置了很多管道，我们可以在插值语法或者指令中直接使用

语法 data | 管道名称 : 参数1 : 参数2 | 管道2

当使用多个管道的时候，前一个管道的输出将作为后一个管道的输入

number

用来格式化数字的

默认每三位加一个逗号，默认保留三位小数

参数表示格式化模板

slice

用来截取的（可以是数组也可以是字符串）

第一个参数表示开始位置

第二个参数表示结束位置（不包括的）

date

用来处理日期的过滤器（十分强大）

参数就是格式化模板或者格式化模板名称

默认是mediumDate

格式化模板

y 年

M 月

d 日

E 星期

h|H 小时

m 分

s 秒

它们的个数不同，表示不同的含义

四位 通常是英文全称

三位 通常是英文简写

两位 通常是两位数

一位 通常是一位数

自定义管道

内置的管道是有限的，有时候要使用更多的管道，我们要自定义管道，跟自定义组件一样，我们可以通过指令创建

ng g pipe 管道名称

自定创建管道脚本文件，以及单测文件

更新了app.module.ts文件，全局声明了管道，因此可以在任何位置使用管道

在管道中，我们通过管道注解类Pipe注入信息

通过name属性定义管道的名称

管道类中的transform方法，表示格式化数据的方法，当数据改变会执行该方法

第一个参数表示处理的数据

从第二个参数开始，表示传递的参数

返回值就是渲染的数据

举例：

import  Pipe, PipeTransform  from @angular/core;
@Pipe(
    name: tocamel
)
export class TocamelPipe implements PipeTransform 
    transform(value: any, firstCharIsUpper?: boolean): any 
        // 将value转化成字符串
        value = String(value);
        // 首字母大写
        if (firstCharIsUpper) 
            // 首字母大写之后，拼接在一起
            value = value[0].toUpperCase() + value.slice(1);
        
        // 匹配_-后面小写字母大写
        return value.replace(/[-_]([a-z])?/g, (match, $1 = ) => $1.toUpperCase())
        // console.log(arguments)
        // return hello;
    

表单校验

当我们与表单发生交互，就会产生数据，对于数据是否合法的？我们需要验证，ng6内置了验证过程，我们可以直接使用

首先，当我们安装了表单模块，此时会对form元素自动创建ngForm指令，我们可以通过临时模板变量的语法，获取它

#f=”ngForm”

此时临时模板变量赋值了，因此就不是DOM元素了，而是对form指令对象的引用

四个属性

dirty 是否输入过

true 表示输入过

false 表示未输入过

pristine 是否未输入过

true 表示未输入过

false 表示输入过

所以dirty与pristine是一对互斥

valid 是否合法

true 表示合法

false 表示非法

invalid 是否非法

true 表示非法

false 表示合法

表单指令对象中包含一个controls属性，存储表单中，子表单的指令对象

跟ngForm指令对象一样，也会具有以上四个属性

子表单元素的指令对象要出现在ngForm中，必须满足两个条件

​​必须设置name属性​​

​​必须使用了数据双向绑定ngModel​​

总结：

如果有一个子表单元素输入过（dirty），表单就是输入过的

如果有一个子表单元素是非法的（invalid），表单就是非法的

表单约束

为了证明表单是否合法，我们要有依据，所以我们要对子表单元素添加约束条件。

在ng6中支持html5表单约束条件：

required 是否是必填的

maxlength 最大长度

minlength 最小长度

pattern 正则约束

注意：

required是在输入前（未输入）时候开始检测。其他的属性都是在输入后开始检测的

这些h5属性浏览器都支持，所以浏览器也会校验的。

校验表单

每一个表单元素，都有以上四个属性，我们可以通过这些属性来校验表单

为了显隐提示文案，在vue中，我们可以使用v-show指令，但是ng6中没有提供ngShow指令，所以我们可以自定义icktShow，还可以使用html5提供的hidden属性

hidden属性，用来隐藏元素

属性值为true：隐藏元素

属性值为false：显示元素

为了让其属性值可以动态的设置，我们可以使用[]语法糖

这样该属性与icktShow指令是一对互斥了。

我们通过判断表单指令对象的四个属性，来显隐提示文案

我们直接通过表单指令访问子表单属性，写法太长了，此时我们可以通过临时模板变量，在子表单元素行，存储子表单元素指令

#username=“ngModel”

此时username临时模板变量，就代表了ngModel指令了

表单提交

当点击表单元素form内提交按钮的时候，就会触发表单的提交动作。

我们可以为form订阅submit事件，监听提交的动作

为了优化提交体验，我们在表单不合法的时候，不让用户提交，

我们可以通过为提交按钮设置disabled属性实现

属性值为true不能操作

属性值为false可以操作

我们可以根据表单的合法性，来设置disabeld

举例：

<!-- 获取表单指令对象 -->
<form #f="ngForm" (submit)="submitData(f)">
    <p>
        <label for="">用户名</label>
        <!-- <input
        type="text"
        autocomplete="off"
        name="username"
        required
        [(ngModel)]="data.username"
        > -->
        <input
        type="text"
        autocomplete="off"
        name="username"
        maxlength="10"
        minlength="4"
        required
        #username="ngModel"
        [(ngModel)]="data.username"
        >
        <!-- 输入后dirty，并且，不合法invalid，要显示 -->
        <span style="color: red" [icktShow]="username.dirty && username.invalid">用户名是4-10位的</span>
    </p>
    <p>
        <label for="">密码</label>
        <!-- <input
        type="text"
        autocomplete="off"
        name="password"
        required
        [(ngModel)]="data.password"
        > -->
        <input
        type="text"
        autocomplete="off"
        name="password"
        pattern="^(\\w)4,6$"
        required
        #password="ngModel"
        [(ngModel)]="data.password"
        >
        <!-- 未输入pristine，或者，合法valid的时候，要隐藏 -->
        <span style="color: red" [hidden]="password.pristine || password.valid">密码必须是字母数字下划线，4-6位</span>
    </p>
    <p>
        <!-- <button (click)="showResult(f)">展示结果</button> -->
        <!-- <button (click)="showResult(username, f)">展示结果</button> -->
        <!-- 表单不合法，不能提交数据 -->
        <button type="submit" [disabled]="f.invalid">提交</button>
    </p>
</form>
<!-- 自定义指令 -->
<!-- <h1 [icktShow]="false">学习</h1>
<h1 [hidden]="false">菜鸟学习</h1> -->