Angulaire 2 | Affichage valeur minuscule lorsque le formulaire est soumis

Question

Quelqu'un peut-il me aider à trouver pourquoi ma valeur de retour minuscule à la fin après que je soumets mon formulaire à l'aide

import {FormGroup, FormControl, validateurs} de « @ formes angulaires/» ;

Voici mon code

component.ts

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

import {UppercaseDirective} from '../uppercase.directive'; 

@Component({ selector: 'app-storageentry', 
    templateUrl: './storageentry.component.html', 
    styleUrls: ['./storageentry.component.css'] 
}) 

export class StorageentryComponent implements OnInit, OnDestroy { 
    storageForm: FormGroup; 

    private initForm(){ 
    let storageDescription: string; 

    //pass the formControl specified by '' to use in HTML 
    this.storageForm = new FormGroup({ 
     description: new FormControl(storageDescription, Validators.required) 
    }) 
    } 
} 

ngOnInit() { 
    this.initForm(); 
} 

onSubmit(){ 
    this.storageEntryService.addStorage(this.storageForm.value); 
    this.storageForm.reset(); 
} 

uppercase.directives.ts

import { Directive, HostListener, Renderer, ElementRef } from '@angular/core'; 
@Directive({ 
    selector: '[uppercase]' 
}) 
export class UppercaseDirective{ 

constructor(
    private renderer: Renderer, 
    private el: ElementRef 
){} 

@HostListener('input') input() { 
this.el.nativeElement.value=this.el.nativeElement.value.toUpperCase();} 
} 

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" uppercase> 
    </div> 
</div> 

Voici la sortie | comme vous pouvez le voir, il affiche la valeur minuscule à la fin de mes données.

Answer 1

Le contrôle de forme angulaire écoute l'événement 'entrée' de l'élément. Il semble que votre directive fasse la même chose mais après que la directive ait mis à jour la valeur, ngControl ne la connait pas avant l'événement d'entrée suivant. Ainsi, à la fin des données, le contrôle de formulaire a toujours la valeur entrée. Vous pouvez envoyer un événement 'input' à partir de la directive, mais je doute qu'il se déroule en boucle. Vous pouvez essayer d'écouter l'événement keydown/keyup ou quelque chose de direction et d'émettre un événement 'input' après cela.

Lorsque des directives sont utilisées avec des contrôles de formulaire, je pense qu'il est préférable d'étendre ControlValueAccessor pour votre directive. S'il vous plaît voir quelques-unes des réponses à la question ci-dessous quelques exemples: -

How to convert input value to uppercase in angular 2 (value passing to ngControl)