介绍
Angular-Cleave 是一个基于 Angular 的输入控件。它使用了 Cleave.js，一个轻量级的、作用于输入框上的自动格式化库。Angular-Cleave 可以给用户提供更加友好的输入体验。
安装
在项目目录下安装 Angular-Cleave：
npm install angular-cleave --save
使用方法
引入
在 app.module.ts 中引入 Angular-Cleave：
-- -------------------- ---- -------
------ - --------------------- - ---- -----------------
-----------
------------- -
------------
--
-------- -
--------------
---------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -在模板中使用
在模板中调用 ngModel 并且使用 cleave 指令即可实现输入控制，具体使用方法见下方示例代码。
<input type="text" [(ngModel)]="data" cleave [cleave-options]="{phone: true}">Cleave 配置
cleave 指令通过 cleave-options 属性读取 Cleave 配置，具体配置如下：
<input type="text" [(ngModel)]="data" cleave [cleave-options]="{phone: true}">可用的 Cleave 选项
下列是可用的 Cleave 选项：
| 选项 | 描述 |
|---|---|
| ** blocks** | 定义每个块的数字长度 |
| ** delimters** | 定义分隔符 |
| ** phone** | 格式化电话号码 |
| ** time** | 格式化时间 |
| ** date** | 格式化日期 |
| ** numeral** | 格式化数字 |
示例代码
以下的示例展示了 Angular-Cleave 的基本使用方法：
<input type="text" [(ngModel)]="data" cleave [cleave-options]="{phone: true}">在以上示例中，我们调用了 ngModel 指令，通过 cleave 指令来格式化输入。{phone: true} 的配置选项用来格式化电话号码。
结论
Angular-Cleave 库提供了简单易用的输入控制方案。通过以上教程，你可以在 Angular 项目中快速地实现输入格式化控制。希望这篇文章能够帮助你更好地掌握这个库！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056f7781e8991b448e7a63