[Angular Directive] 输入框禁止为空字符串与自动去除空格指令

大佬教程收集整理的这篇文章主要介绍了[Angular Directive] 输入框禁止为空字符串与自动去除空格指令，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

一、前言

input 输入框自带了required属性，用以表单验证，但是只要有字符，即使全为空格也能通过required验证，这无法满足一些应用场景，所以需要自定义一些指令，用来满足验证全为空格的输入。@H_419_7@

在使用自定义的 Directive 修改 input 输入框值或属性时，需要注意：@H_419_7@

1. 请尽量使用 Angular 提供的类或方法来修改输入框的值， 以免ngModel无法同步；
2. 同上，使用FormControl而非ElementRef来更新输入框的值；
3. 构造函数中使用NgControl获取输入框的引用，而非直接使用FormControl

二、实例

• 实例使用版本：angular 5.1.0

1. 验证空字符串

通过添加自定义的Validator，实现验证空字符串，不合法的输入返回{'required': truE}对象，等同于原生的在 input 输入框添加 required 属性后的不合法输入的返回结果。@H_419_7@

import { Directive,ElementRef,HostListener,Input,Renderer } from '@angular/core';
import { FormGroup,FormControl,NgControl } from '@angular/forms';

@Directive({
  SELEctor: '[input-required]'
})
export class InputrequiredDirective {

    constructor(private elementRef: ElementRef,private control : NgControl) {
        if (control && control.control) {
            control.control.SETVALidators((c: FormControl) => {
                let v = c.value;
                if (!v || v.trim() == '') {
                    return {'required': true};
                } 
                return null;
            });
        }
    }

}

使用方式

<input type="text" [(ngModel)]="name" name="name" input-required />

2. 替换左边空格

替换左边空格，其实也意味可以在字符串右侧输入空格，却无法全输入空格，但是这种方法有一个缺陷，即如果一直按住空格，然后点击表单的提交，也能绕过输入框的required验证，所以最好是配合上面的input-required指令一起使用。@H_419_7@

同时请注意，这里使用FormControl.SETVALue(...)方法，可以触发ngModel的更新，如果使用 js 或 ElementRef 提供的方式，将会出现ngModel无法同步更新的后果。@H_419_7@

import { Directive,NgControl } from '@angular/forms';

@Directive({
  SELEctor: '[input-ltrim]'
})
export class InputLeftTrimDirective {

    constructor(private elementRef: ElementRef,private control : NgControl) {

    }

    @HostListener("keyup",["$event","$event.target"]) 
    keyupFun(evt,target) {
        if (target.value) {
            this.control.control.SETVALue(this.ltrim(target.value));
        } 
    }

    ltrim(str) {
        return str.replace(/(^\s*)/g,"");
    }

}

使用方式

<input type="text" [(ngModel)]="name" name="name" input-ltrim />

3. 禁止输入空格

禁止输入空格，即当用户按下空格键时便阻止输入，但是如果只是这样，那么用户仍然可能使用粘贴的方式输入空格，所以这里同时在keyup事件中将所有空格替换了。@H_419_7@

import { Directive,Input } from '@angular/core';
import { FormGroup,NgControl } from '@angular/forms';

@Directive({
  SELEctor: '[input-noSpace]'
})
export class InputNoSpaceDirective {

    constructor(private elementRef: ElementRef,private control : NgControl) {

    }

    @HostListener("keydown",["$event"]) 
    keydownFun(evt) {
        if (evt.key.trim() == '') {
            evt.preventDefault();
        }
    }

    @HostListener("keyup",target) {
        if (target.value) {
            this.control.control.SETVALue(target.value.replace(/(\s*)/g,""));
        } 
    }

}

使用方式

<input type="text" [(ngModel)]="name" name="name" input-noSpace />

二、配置

上面省略了配置，这里一并贴出。@H_419_7@

1. 在directives目录下的index.ts中输入如下信息：@H_419_7@

import { InputLeftTrimDirective } from './input-trim/input-ltrim.directive'
import { InputNoSpaceDirective } from './input-trim/input-noSpace.directive'
import { InputrequiredDirective } from './input-required/input-required.directive'

export const DIRECTIVES : Array<any> =[
    InputLeftTrimDirective,InputNoSpaceDirective,InputrequiredDirective,]

2. 在@NgModel中配置如下（不相关部分被省略）：@H_419_7@

import { DIRECTIVES } from './directives';

@NgModule({
    declarations: [
        ..._DIRECTIVES,],}

三、参考链接

• https://stackoverflow.com/questions/40682717/angular-2-input-directive-modifying-form-control-value

大佬总结

以上是大佬教程为你收集整理的[Angular Directive] 输入框禁止为空字符串与自动去除空格指令全部内容，希望文章能够帮你解决[Angular Directive] 输入框禁止为空字符串与自动去除空格指令所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。