Angular(MaterialUI)-格式化用户输入的社会保险号码（SSN）
1.在组件文件中引入matInputModule：
import { MatInputModule } from '@angular/material/input';
2.在NgModule的imports数组中添加MatInputModule：
@NgModule({ imports: [ MatInputModule ] })
- 然后在HTML模板中的
元素内添加一个matInput指令，并使用[(ngModel)]绑定一个双向绑定的变量：
- 然后在组件内定义一个formatSSN函数，这个函数会接受一个SSN字符串，并返回格式化后的SSN字符串：
formatSSN(ssn: string): string { if (ssn) { ssn = ssn.trim().replace(/[^0-9]/g, ''); // 移除非数字字符 if (ssn.length > 3 && ssn.length < 6) { ssn = ssn.slice(0, 3) + '-' + ssn.slice(3); } else if (ssn.length >= 6) { ssn = ssn.slice(0, 3) + '-' + ssn.slice(3, 5) + '-' + ssn.slice(5); } } return ssn; }
这个函数会自动把SSN字符串格式化为"XXX-XX-XXXX"的格式。在输入时，每输入一个数字或者删除一个数字，这个函数都会被调用一次，自动格式化SSN字符串。
完整示例代码如下：
import { Component, NgModule } from '@angular/core'; import { MatInputModule } from '@angular/material/input'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms';
@Component({ selector: 'my-app', template: `