получить ошибку при использовании труб и ngModel в Angular

Question

Я получил пользовательское раскрывающееся меню, в котором value из выбранного раскрывающегося списка будет связывать значение input в моей реактивной форме, используя ngModel, также я применил маску в моих полях input, используя pipe, вот весь соответствующий код:

html файл

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

ts файл

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)}`;
  }
}

Я знаю, что использование ngModel в реактивной форме устарело, но мне нужно использовать его для привязки значения из выбранного раскрывающегося списка, это ошибка, которую я получаю в консоли:

Ошибка: ExpressionChangedAfterItHasBeenCheckedError: Выражение изменилось после его проверки. Предыдущее значение: 'undefined: 512345444444444'. Текущее значение: 'undefined: 5123 •••• •••• 4444'.

ошибка

любаяпредложение о том, как решить эту или любую лучшую практику? спасибо

Answer 1

Не следует использовать ngModel вдоль стороны formControlName , для использования канала вы можете попробовать использовать [value], а затем назначить ему значение formControl для обновления значения каждый раз, когда вы вставляете новыйзначение для ввода:

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

DEMO ??