首页 > 其他分享 >Angular4_text-mask用法

Angular4_text-mask用法

时间:2023-04-30 21:03:06浏览次数:47  
标签:code text mask see Angular4 export import


Angular 2 Input Mask

Getting started

First, install it.


npm i angular2-text-mask --save



Then, import it into your @NgModule:

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { TextMaskModule } from 'angular2-text-mask';

@NgModule({
  imports: [
    FormsModule,
    TextMaskModule
  ],
  declarations: []
})
export class MyModule {}



Then, use it in your component:


@Component({
  selector: 'app',
  template: `
    <input [textMask]="{mask: mask}" [(ngModel)]="myModel" type="text"/>
  `
})
export class AppComponent {
  public myModel = ''
  public mask = ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
}



Documentation

As you can see in the code above, you are passing an object to the textMask? For more information about the values that the textMask object accepts, see this page.

Other use-cases

Unmasking the value that is stored in the model

Text Mask does not provide an option to unmask the model before storing it. You can sanitize the model on your side. See here for details.

change

change on an input field will not work if [text-mask] is present. You can use (ngModelChange) instead. For more information, see this page.

Example

To see an example of the code running, follow these steps:

  1. Clone the repo, 

git clone [email protected]:text-mask/text-mask.gitcd text-maskcd angular2npm installnpm start

  1. Open http://localhost:3000

The code of the example is in angular2/example.

Ionic 2

Unfortunately, we are unable to support Ionic 2 ion-input at this point as it overrides the ControlValueAccessor



我的用法:


<
 td
 ><
 input #
 txtConsumedQty 
 type=
 "text" [
 textMask]=
 "amountMask" 
 name=
 "consumedQty{{i}}" 
 required 
 class=
 "form-control rightjustified" [(
 ngModel)]=
 "item.consumedQty" 
 style=
 "padding:0.2em" (
 change)=
 "onConsumedQtyChange(item, reason, txtConsumedQty)"
 ></
 td
 >
 

 

 
 
 
 
  
import 
   createNumberMask 
   from 
   'text-mask-addons/dist/createNumberMask'
 
 
 

 

 
 
 
export 
   class 
   WorkbenchComponent 
    implements
 
  
: 
   any;
  
 
  

   
 
ngOnInit()
  : 
  void
 
 
this.
  amountMask 
  =
 
 
createNumberMask({
 
 
 
'',
 
 
 
true,
 
 
 
'',
 
 
 
true,
 
 
 
3
 
 

  }),
 
 
 
false,
 
 
 
true
 
 

  };
 
 
 

  }

标签:code,text,mask,see,Angular4,export,import
From: https://blog.51cto.com/u_15976398/6238252

相关文章

  • Angular4_下拉框多选(支持响应式表单验证和模板驱动表单验证)
    支持Angular的响应式表单验证和模板驱动表单验证效果图:UsingwithTemplatedrivenFormsSkills*requiredAngularNameEmailAddress*requiredSubmitName [email protected]{"name":"","email&qu......
  • SpringSecurity过滤器之SecurityContextPersistenceFilter
    SecurityContextPersistenceFilter在请求之前从配置的SecurityContextRepository获得的信息填充SecurityContextHolder,并在请求完成并清除上下文holder后将其存储回存储库。默认情况下,它使用HttpSessionSecurityContextRepository。privatevoiddoFilter(HttpServletRequestreq......
  • Android获取其他包的Context实例,…
    Android中有Context的概念,想必大家都知道。Context可以做很多事情,打开activity、发送广播、打开本包下文件夹和数据库、获取classLoader、获取资源等等。如果我们得到了一个包的Context对象,那我们基本上可以做这个包自己能做的大部分事情。         那我们能得到吗?很高......
  • Android中Context详解 ---- 你所不…
    大家好,             Interfacetoglobalinformationaboutanapplicationenvironment.ThisisanabstractclasswhoseimplementationisprovidedbytheAndroidsystem.Itallowsaccesstoapplication-specificresourcesandclasses,aswellasup-c......
  • 10-react不同层级的组件之间的数据传递数据 createContext 上下文
    //组件传值props接收传递过来的数据importReactDomfrom"react-dom"import{createContext,Component}from"react"//createContextisuseedtocreateacontextbojectionfromcontextproperties//返回一个对象//Provider提供状态Consumer使用状态......
  • android TextView属性大全
    android:autoLink设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接。可选值(none/web/email/phone/map/all)android:autoText如果设置,将自动执行输入值的拼写纠正。此处无效果,在显示输入法并输入的时候起作用。android:bufferType指定get......
  • MFC-GetItemText获取文本
     CStringstr1=mylist4.GetItemText(1,1);//获取文本/*参数1:intnItem行号参数2:intnSubItem列号*/OutputDebugString(str1);   ......
  • MFC-GetExtendedStyle获取扩展样式
     DWORDExStyles=mylist4.GetExtendedStyle();//获取扩展样式DWORDoldstyle=mylist4.SetExtendedStyle(ExStyles|LVS_EX_FULLROWSELECT);//设置扩展样式/*指定的扩展样式LVS_EX_GRIDLINES//绘制表格LVS_EX_SUBITEMIMAGES//......
  • MFC-SetItemText设置文本
     BOOLbb=mylist4.SetItemText(0,1,_T("87"));//设置文本/*参数1:int项索引-行号【从0开始不包括标题栏】参数2:列号参数3:LPCTSTR文本返回值:成功返回非0,失败返回0*/  ......
  • 【Python】【MySQL】Python将JSON数据以文本形式存放到MySQL的Text类型字段中
    1.起因在做一个自动打卡的玩意。登录会得到那个平台一系列的信息。我又不想专门修改、增加数据库字段来存放,所有打算直接将返回的JSON数据保存到一个MySQL字段中。内容肯定不能直接放,考虑下比如数据注入的问题,对吧,容易出问题,所有我是打算将JSON数据转为base64编码的格式。先写......