通过使用Angular内置的FormControl和FormGroup类，可以应用显示遮罩或管道。当用户在表单控件上键入文本时，这些类会自动将输入文本与指定的管道或遮罩进行过滤。下面是一个实现的示例：

app.component.ts

import { Component } from '@angular/core'; import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; import { CustomMask } from './app.custom.mask'; // import custom mask

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { form: FormGroup; // declare form group customMask: CustomMask = new CustomMask(); // create instance of custom mask

constructor(private formBuilder: FormBuilder) {} // inject form builder

ngOnInit() { this.form = this.formBuilder.group({ phoneNumber: new FormControl('', [Validators.required, this.customMask.mask()]) }); }

onSubmit() { console.log(this.form.value); } }

app.custom.mask.ts

import { AbstractControl, ValidatorFn } from '@angular/forms';

export class CustomMask { private maskReplacements: Array<{ [key: string]: string }> = [ { key: /\D/g, value: '' }, { key: /(\d{3})(\d{3})(\d{4})/, value: '$1-$2-$3' } ];

mask(): ValidatorFn { return (control: AbstractControl) => { let value = control.value || ''; for (let i = 0; i < this.maskReplacements.length; i++) { value = value.replace(this.maskReplacements[i].key, this.maskReplacements[i].value); } control.setValue(value, { emitEvent: false }); // update control value without triggering event return null; }; } }

app.component.html