1.在组件文件中引入matInputModule：

import { MatInputModule } from '@angular/material/input';

2.在NgModule的imports数组中添加MatInputModule：

@NgModule({ imports: [ MatInputModule ] })

3. 然后在HTML模板中的元素内添加一个matInput指令，并使用[(ngModel)]绑定一个双向绑定的变量：

4. 然后在组件内定义一个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: `

Format SSN using Material UI