Angular 2 | Showing lowercase value when form is submitted

Question

Can someone help me find out why my value returning lowercase in the end after i submit my form using

import { FormGroup, FormControl, Validators } from '@angular/forms';

Here is my 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>

Here's the output | as you can see it's displaying lowercase value at the end of my data.

Is your code above right? I see you referring to a form control named `ownerid` in the template, but I don't see that declared in the form group. — R. Richards, Jul 17 '17 at 01:02
sorry for that i wrongly paste the html, but the codes is fine it's just displaying lowercase value in the end after i submit my form. — Jydon Mah, Jul 17 '17 at 01:04

score 1 · Accepted Answer · answered Jul 17 '17 at 01:12

The angular form control listens to the 'input' event of the element. It seems your directive does the same but after the directive updates the value, ngControl doesn't know about it till the next input event happens. So at the end of the data the form control always have the value entered . You can dispatch an 'input' event from the directive but I doubt it will go in a loop. You can try listening to keydown/keyup event or something directive and emitting 'input' event after that.

When directives are used with form controls I think it is better to extend ControlValueAccessor for your directive. Please see some of the answers to the question below for some good examples :-

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

Thanks for this @ Krishnanunni :-) – Jydon Mah Jul 17 '17 at 01:28 — Jydon Mah, Jul 17 '17 at 01:28

Angular 2 | Showing lowercase value when form is submitted

1 Answers1