GVKun编程网logo

Angular4_清空input输入框（angular input）

14

本文的目的是介绍Angular4_清空input输入框的详细情况，特别关注angularinput的相关信息。我们将通过专业的研究、有关数据的分析等多种方式，为您呈现一个全面的了解Angular4_清

本文的目的是介绍Angular4_清空input输入框的详细情况，特别关注angular input的相关信息。我们将通过专业的研究、有关数据的分析等多种方式，为您呈现一个全面的了解Angular4_清空input输入框的机会，同时也不会遗漏关于98.input输入框 只允许输入数字、angular 6+ input输入框 keyup.enter触发其他button事件的细节问题、angular inputNumber指令输入框只能输入数字的实现、Angular.js组件之input mask对input输入进行格式化详解的知识。

本文目录一览：

Angular4_清空input输入框（angular input）

Angular4_清空input输入框（angular input）



Method 1.

Using `ngModel`.

@Component({
  selector: 'my-app',template: `
    <div>
      <input type="text" placeholder="Search..."  [(ngModel)]="searchValue">
      <button (click)="clearSearch()">Clear</button>
    </div>
  `,})
export class App {
  searchValue:string = '';
  clearSearch() {
    this.searchValue = null;
  }
}

Plunker code:Plunker1

Method 2.

Using null value instead of empty quotation marks.

Plunker code:Plunker2

Method 1.

Using `ngModel`.

ottom:1em; padding:5px; border:0px; font-style:inherit; font-variant:inherit; font-weight:inherit; font-size:13px; line-height:inherit; font-family:Consolas,}) export class App { searchValue:string = ''; clearSearch() { this.searchValue = null; } }

Plunker code:Plunker1

Method 2.

Using null value instead of empty quotation marks.

 
       
 Plunker code:Plunker2

98.input输入框 只允许输入数字

98.input输入框 只允许输入数字

 

onkeyup="value=value.replace(/[^\d]/g,'''')"

1.效果

angular 6+ input输入框 keyup.enter触发其他button事件的细节问题

angular 6+ input输入框 keyup.enter触发其他button事件的细节问题

最近遇见一个问题；需求是：input可以通过回车实现和点击button一样的功能，看似狠简单的一个问题；但是我却发现了一个问题；先上图；

 

 

 

 

 

我发现我回车后居然调用了两次接口；部分html代码：

<div nz-row [nzGutter]="8" nzType="flex" nzAlign="bottom">
      <div nz-col [nzXl]="16" [nzXXl]="18">
        <input nz-input formControlName="searchValue" placeholder="搜索关键字" (keyup.enter)="getSearchData(true)" />
      </div>
      <div nz-col [nzXl]="4" [nzXXl]="3">
        <button nz-button [nzType]="''primary''" nzBlock (click)="getSearchData(false)">
          搜索
        </button>
      </div>
      <div nz-col [nzXl]="2" [nzXXl]="1">
        <button nz-button (click)="resetForm()">重置</button>
      </div>
      <div nz-col [nzXl]="2" [nzXXl]="2">
        <button nz-button nzType="link" (click)="toggleCollapse()">
          {{ isCollapse ? ''收起'' : ''展开'' }}
          <i nz-icon [nzType]="isCollapse ? ''up'' : ''down''"></i>
        </button>
      </div>
    </div>

一开始我以为是因为冒泡的问题；导致父级响应后触发了所有事件，然后我就百度关于angular 冒泡的问题； 

申明一下，我现在使用的是angular 8的版本；虽然我标题上是6；这里我就要吐槽一下百度上的一部分大（hua）佬(li)心(hu)得(shao) 

搜一个关于angular+的冒泡事件，可能我见识短浅哈，网上都是关于angularJs的冒泡内容，然后搜到的都是各种花里胡哨的；其实我的想法狠简单，我先解决问题，再去弄明白，整那么多花里胡哨的还解决不了问题还那么多粘贴复制的；

最后在一个stackoverflow 上一个外国程序员提到了这个问题，然后一个大佬解决了；虽然可能本身我就走偏了；但是我还是要吐槽一下；别说啥要专研前端技术，毕竟我梦想是想当一名裁缝的厨师

 

大致意思是这样，问题是讲button默认是触发submit的提交功能，加上绑定的keyup.enter；就出现了调用两次的问题；

解决方法是：为button 添加 type="button"属性；

 

<button nz-button [nzType]="''primary''" nzBlock type="button" (click)="getSearchData(false)"> 
          搜索
        </button>

 

然后在keyup.enter   发现不会触发了；

angular inputNumber指令输入框只能输入数字的实现

angular inputNumber指令输入框只能输入数字的实现

1、建立一个独立模块用于作为公用指令的模块

1）生成模块

ng g m directive

2）进入指令模块目录

cd directive

3）生成一个只能输入数字的指令类

ng g d numberinput

4）指令模块directive.module.ts代码如下

import { NgModule, ModuleWithProviders } from ''@angular/core'';
import { CommonModule } from ''@angular/common'';
import { NumberinputDirective } from ''./numberinput.directive'';
@NgModule({
 imports: [
  CommonModule
 ],
 declarations: [NumberinputDirective],
 exports:[ // 使引用该模块的类可以使用该指令
  NumberinputDirective
 ]
})
export class DirectiveModule { }

5）指令类numberinput.directive.ts代码如下

@Directive({
 selector: ''input[numberInput]''
})
export class NumberInputDirective {
 // tslint:disable-next-line: no-input-rename
 @Input(''numberInput'') numberType: string;
 constructor(private el: ElementRef) {}

 @HostListener(''input'', [''$event.target.value''])
 onChange(value: string): void {
  if (this.numberType.length < 1) {
   this.updateIntegerValue(value);
  } else {
   this.el.nativeElement.value = value.replace(/[^\d.]/g, '''');
  }
 }
 @HostListener(''blur'', [''$event.target.value'']) onBlur(value: number): void {
  if (this.numberType.length >= 1) {
   this.updateFloatValue(value);
  }
 }
 updateIntegerValue(value: string): void {
  this.el.nativeElement.value = value.replace(/[^\d]/g, '''');
 }
 updateFloatValue(floatValue: number): void {
  const value = String(floatValue);
  const reg = /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/.test(value);
  const numBegin = /^\d/.test(value);
  const numEnd = /\d$/.test(value);
  if (reg && numBegin && numEnd) {
   this.el.nativeElement.value = value;
  } else {
   this.el.nativeElement.value = 0;
  }
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:
  • Angularjs中的验证input输入框只能输入数字和小数点的写法（推荐）

Angular.js组件之input mask对input输入进行格式化详解

Angular.js组件之input mask对input输入进行格式化详解

前言

最近因为项目的需要，经常有一些对input输入进行格式化的需求，以前做的时候在js中写指令进行处理，但是这样又要在js或者在java代码中将请求的数据进行还原，很是麻烦，于是在网上看到了jquery的inputmask组件，觉得很好用，在项目中写出指令，用起来很方便。

方法如下：

在项目中引入jquery和jquery-inputmask，然后在项目中写指令，如下：

rush:js;"> define(['./module'],function (directives) { 'use strict'; directives.directive('inputMask',function ($timeout) { return { restrict: 'EA',require: 'ngModel',link: function (scope,elm,attrs,ngModel) { var applyModelEvents = [ "oncomplete","onKeyUp","onkeyvalidation" ],maskType = "mask";

if (attrs.formatOption) {
var formatOption = scope.$eval(attrs.formatOption);
if (formatOption.parser) {
ngModel.$parsers.push(formatOption.parser);
}

if (formatOption.formatter) {
ngModel.$formatters.push(formatOption.formatter);
}

if (formatOption.isEmpty) {
ngModel.$isEmpty = formatOption.isEmpty;
}
}

var applyModel = function (fun) {
return function () {
(function (args) {
$timeout(function () {
var viewValue = elm.inputmask('unmaskedvalue');
if (viewValue !== ngModel.$viewValue) {
ngModel.$setViewValue(viewValue);
}
if (fun) {
fun.apply(scope,args);
}
});
})(Array.prototype.slice.call(arguments));
};
};

var extendOption = function (option) {
var newOption = angular.extend({},option);
angular.forEach(applyModelEvents,function (key) {
newOption[key] = applyModel(newOption[key]);
});

return newOption;
};

if (attrs.inputMask) {
maskType = scope.$eval(attrs.inputMask);
}

if (maskType) {
if (angular.isObject(maskType)) {
var maskOption = extendOption(maskType);
$timeout(function () {
elm.inputmask(maskOption);
});
} else {
var maskOption = extendOption(scope.$eval(attrs.maskOption) || {});
$timeout(function () {
elm.inputmask(maskType,maskOption);
});
}
}

elm.bind("blur",function(){
$timeout(function () {
if(attrs.isMask){

}else{
ngModel.$setViewValue(elm.inputmask('unmaskedvalue'));
}
});
});

}
}
});
});

如需要将银行卡号按银行卡格式显示：

html:

rush:xhtml;">

angular controller中cardOption：

rush:js;"> $scope.cardOption = { mask: function () { return ["9999 9999 9999 9999 [999]"]; }};

如果日期表示的时候，将string直接转为data类型：

rush:js;"> $scope.dateFormatOption = { parser: function (viewValue) { return viewValue ? new Date(viewValue) : undefined; },formatter: function (modelValue) { if (!modelValue) { return ""; } var date = new Date(modelValue); return (date.getFullYear() + "-" + date.getMonth() + "-" + date.getDate()).replace(/\b(\d)\b/g,"0$1"); },isEmpty: function (modelValue) { return !modelValue; } };

HTML代码：

rush:xhtml;">

另外，指令中的一些属性需要注意：

inputMask主要是制定页面展示的样式：如展示银行卡号的例子；

　1、format-option主要是指定在格式化的时候解析、格式化和为空的时候，数据的格式；如日期处理，最后进行请求的时候就是传入data类型；

　2、isMask主要是指定页面展示的是否是传入后台请求的数据，如卡号解析为XXXX XXXX XXXX XXXX，如果isMask为true则传入后台则为XXXX XXXX XXXX XXXX，否则为XXXXXXXXXXXXXXXX。

3、maskOption:指定页面展示的样式，同时也可以用回调，在完成和验证的时候做一些处理动作。如下：

rush:js;"> $scope.testoption = { "mask": "99-9999999","oncomplete": function () { console.log(); console.log(arguments,"oncomplete!this log form controler"); },"onkeyvalidation": function () { console.log("onkeyvalidation event happend! this log form controler"); } }

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对小编的支持。

今天的关于Angular4_清空input输入框和angular input的分享已经结束，谢谢您的关注，如果想了解更多关于98.input输入框 只允许输入数字、angular 6+ input输入框 keyup.enter触发其他button事件的细节问题、angular inputNumber指令输入框只能输入数字的实现、Angular.js组件之input mask对input输入进行格式化详解的相关知识，请在本站进行查询。

本文标签：

上一篇Angular2学习笔记之依赖注入（angular依赖注入理解）

下一篇angularjs – 如何调试angular [$injector：modulerr]错误（angularjs stateprovider）

相关文章