Angular 2表单输入Pipe报错：ExpressionChangedAfterItHasBeenCheckedError排查

Let's break down why you're hitting this error and how to fix it cleanly:

The Root Cause #

Your current code mixes two conflicting ways to control the input's value:

• [(ngModel)]="phoneNumber" creates a two-way binding that syncs the input's value with your component's phoneNumber property.
• value="{{phoneNumber|phoneMask}}" manually overrides the input's value with the piped/formatted version.

Angular's change detection runs in cycles: first it checks values, then applies updates, then checks again to ensure consistency. When you type "1", here's what happens:

1. ngModel updates phoneNumber to "1".
2. The pipe runs and transforms "1" to "(1", which sets the input's value.
3. ngModel detects this new value and updates phoneNumber to "(1".
4. The second change check sees phoneNumber went from "1" to "(1" after the first check—hence the error.

Solution 1: Use a Getter/Setter to Separate Raw and Formatted Values #

The cleanest approach is to separate the raw unformatted phone number (stored in your component) from the formatted display value. Here's how:

Component Code

import { PhoneMaskPipe } from './path-to-your-phone-mask.pipe';

@Component({
  // ... your component metadata
  providers: [PhoneMaskPipe] // Inject the pipe so we can use it in the component
})
export class YourComponent {
  private rawPhoneNumber: string = ''; // Stores unformatted number

  constructor(private phoneMaskPipe: PhoneMaskPipe) {}

  // Getter returns formatted value for display
  get phoneNumber(): string {
    return this.rawPhoneNumber ? this.phoneMaskPipe.transform(this.rawPhoneNumber) : '';
  }

  // Setter takes formatted input, strips formatting, and saves raw value
  set phoneNumber(formattedValue: string) {
    this.rawPhoneNumber = formattedValue.replace(/[()-\s-]/g, ''); // Remove mask characters
  }
}

Template Code

Remove the value attribute entirely—let the getter handle the formatted display:

<ion-input type="tel" name="cellPhone" id="cellPhone" [(ngModel)]="phoneNumber"></ion-input>

Solution 2: Use ngModelChange Event #

If you prefer not to use getters/setters, you can manually handle the value sync with ngModelChange:

Component Code

import { PhoneMaskPipe } from './path-to-your-phone-mask.pipe';

@Component({
  // ... your component metadata
  providers: [PhoneMaskPipe]
})
export class YourComponent {
  formattedPhone: string = '';
  rawPhoneNumber: string = '';

  constructor(private phoneMaskPipe: PhoneMaskPipe) {}

  onPhoneChange(inputValue: string) {
    // Strip formatting to get raw number
    this.rawPhoneNumber = inputValue.replace(/[()-\s-]/g, '');
    // Re-apply mask for display
    this.formattedPhone = this.phoneMaskPipe.transform(this.rawPhoneNumber);
  }
}

Template Code

Use one-way binding for ngModel and handle changes with ngModelChange:

<ion-input type="tel" name="cellPhone" id="cellPhone" 
           [ngModel]="formattedPhone" 
           (ngModelChange)="onPhoneChange($event)"></ion-input>

Key Takeaway #

Never mix [(ngModel)] with a manual value attribute in Angular templates. ngModel is designed to manage the input's value, and overriding it with a piped value creates a circular update that triggers change detection errors. Separating raw and formatted values ensures your data stays clean while providing the masked display users expect.

内容的提问来源于stack exchange，提问作者Max Power