Как сделать значение в нижнем регистре в mat-форме

Question

У меня есть матричная форма, из которой я хочу, чтобы пользователь ввел некоторые значения, а затем я хочу отправить эти значения. Однако я хочу, чтобы одно из полей было преобразовано в нижний регистр, а затем отправлено. Как я могу этого добиться.

HTML Код:

<mat-form-field appearance="fill">
              <mat-label>Hive Table</mat-label>
              <input
                matInput
                formControlName="hiveTable"
              />
            </mat-form-field>

Машинописный код:

this.generalInfoForm = new FormGroup({
      hiveTable: new FormControl('', [Validators.required]),
    });

Что я пробовал до сих пор

 <mat-label>Hive Table</mat-label>
              <input
                matInput
                oninput="this.value = this.value.toLowerCase()"
                (keyup.enter)="sendit($event.target.value)"
                formControlName="hiveTable"
              />
            </mat-form-field>

Я использовал oninout и используя keyup, я сделал console.log, и в консоли значения преобразуются в tolowercase, однако при его отправке значение изменяется обратно в соответствии с тем, как печатал пользователь. Что я делаю не так.

Answer 1

почему бы не использовать на входе

style="text-transform: lowercase"

Затем перед отправкой вы можете (я думаю, у вас есть функция submit ())

submit(form:FormGroup)
{
   if (form.valid)
   {
       form.value.yourField=form.value.yourField.toLowerCase()
       console.log(form.value)
   }
}

Answer 2

Вы можете использовать Directive, как показано ниже:

import { Directive, HostListener, ElementRef, Renderer2 } from '@angular/core';
@Directive({
    selector: '[lowercase]'
})
export class LowercaseDirective {

    constructor(private renderer: Renderer2, private elementRef: ElementRef) {}

    @HostListener('keyup') onKeyUp() {
      const nativeElement = this.elementRef.nativeElement;
      nativeElement.value = nativeElement.value.toLowerCase();  
    }
}

И в вашем шаблоне это должно быть определено следующим образом:

<input matInput ... lowercase/>

Пожалуйста, посмотрите на это StackBlitz