angular - Validação de moeda em mat-input

Estou tentando colocar uma validação quando um usuário digita um preço. Se eles digitarem $20.0000 no campo de entrada, uma mensagem de validação aparecerá e o formulário o marcará como inválido. Isso seria uma validação por regex e, se sim, como fazer isso? Não tenho certeza de como fazer isso e estou procurando ajuda com uma possível solução para isso.

<mat-form-field appearance="legacy" floatLabel="always">
          <mat-label>Breakfast</mat-label>
          <input
            matInput
            type="number"
            class="example-right-align"
            placeholder="0"
            [formControl]="bfastamountCtrl"
            [value]="bfastamountCtrl.value | number: '1.2-2'"
          />
          <span matPrefix>$&nbsp;</span>
        </mat-form-field>

Resposta #1

Parece que você usa Angular com um formulário reativo? Se for assim, você deve ou

a. fornecer um Validador personalizado para o campo dado.

b. ou use o validador de padrão

Exemplo para um:

const myValidator(control: FormControl) { 
    const value = control.value; 
    if (/* whatever is a invalid value*/) { 
        return /* some object that defined the error */
    }
    return null;
}

e use-o como

...
bfastamountCtrl = 
    new FormControl('', [myValidator]
);

Exemplo para b:

...
bfastamountCtrl = 
    new FormControl('', [Validators.pattern("/' your regex-pattern */")
]);
...

Resposta #2

Acho que você deveria tentar isso. Com pattern você pode validar seu controle de entrada.

<mat-form-field appearance="legacy" floatLabel="always">
      <mat-label>Breakfast</mat-label>
      <input
        matInput
        type="number"
        class="example-right-align"
        pattern="^\$(\d{1,3}(\,\d{3})*|(\d+))(\.\d{2})?$"
        placeholder="0"
        [formControl]="bfastamountCtrl"
        [value]="bfastamountCtrl.value | number: '1.2-2'"
      />
      <span matPrefix>$&nbsp;</span>
    </mat-form-field>