- Angular UI Development with PrimeNG
- Sudheer Jonna Oleg Varaksin
- 153字
- 2021-07-15 17:33:03
Making a part of the mask optional
Till now, all the examples of input masks have shown that all the characters in a mask are mandatory. It is also possible that you can make a part of the mask optional with the use of the question mark (?) character. Anything listed after the question mark within a mask definition will be treated as an optional input. A common use case is displaying the phone number with an optional extension number, as follows:
<span>Phone Ext</span>
<p-inputMask mask="(999) 999-9999? x99999" [(ngModel)]="optional"
name="optionalmask" placeholder="(999) 999-9999? x99999">
</p-inputMask>
Once the user finishes the input by reaching the question mark character and blurs the component, the rest of the validation will be skipped. That is, the input up to that part won't be erased. For example, phone number inputs, such as (666) 234-5678 and (666) 234-5678? x1230 will be valid inputs for the mask's optional case.
The complete demo application with instructions is available on GitHub at
https://github.com/ova2/angular-development-with-primeng/tree/master/chapter3/inputmask.
https://github.com/ova2/angular-development-with-primeng/tree/master/chapter3/inputmask.
推薦閱讀
- JavaScript百煉成仙
- 前端跨界開發指南:JavaScript工具庫原理解析與實戰
- 深入淺出Spring Boot 2.x
- 算法精粹:經典計算機科學問題的Python實現
- Visual C++數字圖像處理技術詳解
- Swift 4從零到精通iOS開發
- Photoshop CC移動UI設計案例教程(全彩慕課版·第2版)
- Web前端開發最佳實踐
- 實戰Python網絡爬蟲
- Microsoft HoloLens By Example
- C/C++代碼調試的藝術(第2版)
- Docker on Windows
- 開源網絡地圖可視化:基于Leaflet的在線地圖開發
- Expert Angular
- Neo4j High Performance