Question

I want to convert all input to uppercase. But I am using a material tag which does not allow me to to do using normal uppercasepipe. Is there any way to do it in material tag?

<mat-form-field *ngIf="globals.isAdding"> 
   <input matInput placeholder="Name" formControlName="FirstName"
    [ngModel]="value" (ngModelChange)="value=$event.toUpperCase()"> 
</mat-form-field>

我也尝试过使用其他方式

HTML代码

<mat-form-field *ngIf="globals.isAdding"> 
   <input matInput placeholder="Name" formControlName="FirstName" 
    [ngModel]="dailyScheduleForm.lineupOriginTerminal | myPipe"
    (ngModelChange)="dailyScheduleForm.lineupOriginTerminal=$event" 
   type="text"> 
</mat-form-field>

TS代码

import { UpperCasePipe } from '@angular/common'; 

@Pipe({name: 'myPipe'}) 
export class MyPipe implements PipeTransform{ 

   transform(val){ 
     return val.toUpperCase() 
   } 
} 

@Component(...) 
export class TestCode implements OnInit {...}

Answer 1

在您的HTML中输入以下内容：

<input matInput placeholder="Name" formControlName="FirstName" [ngModel]="dailyScheduleForm.lineupOriginTerminal  (ngModelChange)="changeUpperCase(dailyScheduleForm.lineupOriginTerminal)" type="text">

在下面的TS文件中：

changeUpperCase(textToUpper: string){
        console.log("textToUpper: "+ textToUpper); 
        var newWord = textToUpper.toUpperCase();
        console.log("The word in upper case: "+ newWord);    

  }

输入值始终为大写

      <div>
        <mat-form-field>
          <input matInput placeholder="Name" #input [value]="input.value.toUpperCase()" type="text">
        </mat-form-field>
      </div>

Answer 2

使用反应式表单，您可以订阅valueCahnges事件并在其中添加值

this.myForm.get('state').valueChanges
        .pipe(
            distinctUntilChanged() //it is needed because patchValue emits execution again
        )
        .subscribe((value: string) => {
            this.myForm.get('state').patchValue(value.toUpperCase());
        })

Answer 3

这可以使用输入事件的javascript版本完成

将此添加到您输入的HTML中

VTBL

Answer 4

您可以使用指令 api。这是一个大写名称且只接受字母的指令示例：

export function formatName(val: string): string {
    return val.toUpperCase().replace(/[^a-zA-ZÀ-ú\'\s\-]/, "")
}


@Directive({
    selector: '[sanitizeName]',
})
export class SanitizeNameDirective {
    constructor(private control: NgControl) {}

    @HostListener('input', ['$event'])
    public onInput(): void {
            this.control.control.setValue(formatName(this.control.value));
    }
}

然后，当您想将给定表单的名称字段大写时：

<input type="text" matInput sanitizeName [formControl]="name" placeholder="Ex. DUPONT">

不要忘记在您的应用模块中声明您的指令。

如何在角度材质中将所有输入转换为大写？

4 个答案:

输入值始终为大写