UpperCasePipe for input in Angular 4

Question

I want to use uppercase pipe for input box without ngModel, also I am using form builder. Any way to convert all value of form in uppercase.

<form [formGroup]="addTrackForm" (ngSubmit)="addTrack(addTrackForm.value)">  
  <input type="text" formControlName="name" />
  <input type="text" formControlName="adminAdamGroup" class="inputTxt" />
  <button type="submit" class="btn btn-primary btn-sm" [disabled]="!addTrackForm.valid">Add</button>
</form>

score 3 · Answer 1 · edited May 12 '18 at 14:41

3

Solution. You can use the input as follows

(input)="orderForm.patchValue({name: $event.target.value.toUpperCase()})"

edited May 12 '18 at 14:41

spottedmahn

14,823
13
108
178

answered Dec 05 '17 at 00:51

user9053661

39
2

This solution moves cursor at the end. – AKASH Oct 12 '18 at 05:23

score 2 · Answer 2 · answered Sep 18 '17 at 10:30

You just need to set the value of the control without emiting the change event. Looping upon every values of the form can be done like this :

this.form.valueChanges.do(values=>{
  Object.keys(values).forEach(k=>{
    this.form.get(k).setValue(value.toUpperCase(),{emitEvent:false});
  });
}).subscribe();

You can also create a component or directive that implements ControlValueAccessor and will handle the transformation.

Tim · Answer 3 · 2019-02-13T10:21:47.120

I am using a decorator to mark a property case type and when a value changes for one of the properties marked as 'upper' or 'lower' and the new value is not case typed correctly, I change the case and then move the cursor on the correct position becasue changing the FormControl's value will put the cursor at the end of the value.

This works for typing, deleting or pasting text no matter the position or the case type.

Maybe it could be transformed into a directive to which will be passed the case type for the input for a more elegant solution.

The folowing code will check every FormControl that is binded to a property marked as 'upper' or 'lower':

import { Component, OnInit, OnDestroy, Renderer2 } from '@angular/core';
import { takeUntil, filter } from 'rxjs/operators';
----
constructor(private _renderer2: Renderer2){}

ngOnInit() {
  this.getProperties(this.entity)
    .filter(prop => new Array<string>('upper', 'lower')
      .includes(this.getPropertyCaseType(this.entity, prop)))
    .forEach(prop => {
      this.form.controls[prop].valueChanges
        .pipe(filter(v => {
          if (!v) return false;
          let caseType = this.getPropertyCaseType(this.entity, prop);
          if (caseType === 'upper') return v !== (<string>v).toUpperCase();
          if (caseType === 'lower') return v !== (<string>v).toLowerCase();
          return false;
        }))
        .subscribe(t => {
          let oldVal = this.form.value[prop];
          let currentVal = <string>t;

          this.form.controls[prop].setValue(this.getPropertyCaseType(this.entity, prop) === 'upper' ?
          currentVal.toUpperCase() :
          currentVal.toLowerCase());

          let inputElement = this._renderer2.selectRootElement(`#input_${prop}`);
          if (!inputElement || !oldVal) return;

          let diff: string = '';
          for (let i = 0; i < currentVal.length; i++)
            if (currentVal[i] !== oldVal[i - diff.length]) 
              diff = `${diff}${currentVal[i]}`;

          let diffPosition = currentVal.lastIndexOf(diff);
          inputElement.setSelectionRange(diffPosition + diff.length, diffPosition + diff.length);
      });
    });
}

UpperCasePipe for input in Angular 4

3 Answers3