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

Question

我有一个自定义下拉列表，其中来自选定下拉列表的value 将使用ngModel 在我的反应形式中绑定input 值，我还使用管道在input 字段中应用了掩码，这是所有相关代码：

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

ma​​sk.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 已被弃用，但我需要将其用于从选定下拉列表中绑定值，这是我在控制台中遇到的错误：

ERROR 错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。以前的值：'未定义：512345444444444'。当前值：'未定义：5123 •••• •••• 4444'。

错误

关于如何解决这个问题或任何更好的做法的任何建议？谢谢

Answer 1

您不应该在 formControlName 旁边使用 ngModel，对于使用管道，您可以尝试使用 [value]，然后将 formControl 值分配给它以在每次更新时更新值在输入中插入新值：

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

DEMO ??