Winkel 2 | Wie setze ich einen Großbuchstaben, wenn das Formular gesendet wird?

Question

Wie wird der Wert beim Versenden des Formulars in Großbuchstaben gesetzt?

Ich versuche, .toUpperCase() -Methode zu verwenden, aber es funktioniert nicht. ist ihre Formvalidierung zum automatischen Großbuchstabewert, wenn Formular eingereicht wird?

Hier sind meine unten angegebenen Codes.

component.html

<div class="form-group input-holder"> 
    <label class="col-lg-2">Description</label> 
    <div class="col-lg-4"> 
     <small [ngClass]="{'prompterror': storageForm.controls.description.valid || storageForm.controls.description.pristine}"> 
     *required 
     </small> 
     <input type="text" class="input-field" placeholder="Description" formControlName="description" ngModel> 
    </div> 
</div> 

component.ts Datei

import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core'; 
import { FormGroup, FormControl, Validators } from '@angular/forms'; 
import { Subscription } from 'rxjs/Subscription'; 

import { Storage } from '../shared/storage.model'; 
import { StorageEntryService } from '../storage.service'; 

@Component({ 
    selector: 'app-storageentry', 
    templateUrl: './storageentry.component.html', 
    styleUrls: ['./storageentry.component.css'], 
}) 
export class StorageentryComponent implements OnInit, OnDestroy { 

    storageForm: FormGroup; 

    constructor(private storageEntryService: StorageEntryService) {} 

    private initForm() { 
     let storageDescription = ''; 

     if (this.editButton) { 
      const storage = this.storageEntryService.getStorage(this.storageId) 
      storageDescription = storage.description; 
     } 

     this.storageForm = new FormGroup({ 
      'description': new FormControl(storageDescription, Validators.required) 
     }) 
    } 
} 

Senden Funktion

onSubmit(){ 
// Switching for Add Button and Edit Button 
if (this.editButton) { 
    this.storageEntryService.updateStorage(this.storageIdIndex, this.storageForm.value); 
    this.editButton = false; 
}else{ 
    this.storageEntryService.addStorage(this.storageForm.value); 
} 
this.storageForm.reset(); 

}

Answer 1

eine Richtlinie erstellen, dieses Szenario zu behandeln

<input type="text" change /> 

Richtlinie müssen die unter keyup Veranstaltung haben behandelt

@HostListener('keyup') onKeyUp() { 
    this.el.nativeElement.value=this.el.nativeElement.value.toUpperCase(); 
    console.log(this.el.nativeElement.value) 

    } 

LIVE DEMO