Alterei o campo valor para o tipo number porém não é possível colocar vírgula

Alterei o campo valor para o tipo number porém não é possível colocar vírgula:

import { DEFAULT_CURRENCY_CODE, LOCALE_ID, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { NovaTransferenciaComponent } from './nova-transferencia/nova-transferencia.component';
import { ExtratoComponent } from './extrato/extrato.component';
import { registerLocaleData } from '@angular/common';
import localePt from '@angular/common/locales/pt'

registerLocaleData(localePt, 'pt');

@NgModule({
  declarations: [
    AppComponent,
    NovaTransferenciaComponent,
    ExtratoComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [
    { provide: LOCALE_ID, useValue: 'pt' },
    {
      provide: DEFAULT_CURRENCY_CODE,
      useValue: 'BRL',
    },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

<section class="container">
  <form class="formulario" (ngSubmit)="transferir()">
    <h2 class="formulario__titulo">Nova Transferência</h2>

    <div class="form-field">
      <label class="form-field__label" for="valor">Valor</label>
      <input class="form-field__input" id="valor" type="number"  name="valor" [(ngModel)]="valor" />
    </div>

    <div class="form-field">
      <label class="form-field__label" for="destino">Destino</label>
      <input class="form-field__input" id="destino" type="text"  name="destino" [(ngModel)]="destino" />
    </div>

    <div class="botao-wrapper">
      <button class="botao" type="submit">Transferir</button>
    </div>
  </form>
</section>