在Angular中使用管道和ngModel时出错

Question

I got a custom dropdown where value from selected dropdown will bind in input value in my reactive form using ngModel , also I had applied mask in my input fields using pipe, here is all relevant code :

html file

<form [formGroup]="creditCardForm" (ngSubmit)="submitCreditCardForm()">
  <input 
     [ngModel]="selectedCard.cardNumberMasked | creditCardMask: true"
     (ngModelChange)="selectedCard.cardNumberMasked = $event"
     type="text"
     formControlName="creditCardNumber">
</form>

ts file

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

export class MyComponent implements OnInit {
  creditCardForm: FormGroup;

  constructor(
    private builder: FormBuilder
  ) {
    this.creditCardForm = builder.group({
      creditCardNumber: ['', Validators.required]
    });
  }    
}

mask.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'creditCardMask',
})
export class CreditCardMaskPipe implements PipeTransform {
  transform(value: string, showMask: boolean): string {
    if (typeof value === 'number') {
      value = JSON.stringify(value);
    }

    if (!showMask || (value.length < 16 && value.length < 15)) {
      return value;
    }

    return `${value.substr(0, 4)} ${'\u2022'.repeat(4)} ${'\u2022'.repeat(
      4
    )} ${value.substr(value.length - 4, value.length)}`;
  }
}

I know using ngModel in reactive form is deprecated but I need to use it for binding value from selected dropdown, this is the error I get in my console:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined: 512345444444444'. Current value: 'undefined: 5123 •••• •••• 4444'.

error

any suggestion on how to solve this or any better practice ? thanks

Answer 1

You shouldn't use ngModel along side formControlName , for using pipe you can try using [value] and then assign formControl value to it to update value every time you insert new value to input:

<form [formGroup]="creditCardForm" (ngSubmit)="submitCreditCardForm()">
  <input 
     [value]="creditCardForm.get('creditCardNumber').value | creditCardMask: true"
     type="text"
     formControlName="creditCardNumber">
</form>

DEMO 🚀🚀