How to make input appear as sentence case based on typing using angular8

Question

Hi i have an input field, where in based on typing i want to show the text as sentence case, but it is appearing as title case. If i type "hello hai how are you" it displays as "Hello Hai How Are You" but i want this to appear as "Hello hai how are you" , but if user only user CapsLock while typing then it should allow that as priority.

DEMO:

DEMO

DEMO2 with Pipe:

Pipe Used

HTML:

<div class="col-md-6 mb-3">
    <label for="input1">Input Field to be sentense case</label>
    <input  type="text" class="form-control text-capitalize" id="input1" placeholder="Name"
     formControlName="name"
     name="name"
      required />
  </div>

HTML2:

<form [formGroup]="myForm">
    <input formControlName="myNumber| titleCase" />
</form>

TS:

this.myForm = this.fb.group({
      myNumber: ["hello hai how are you"]
    });

pipe.ts:

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({ name: "titleCase" })
export class TitleCasePipe implements PipeTransform {
  public transform(input: string): string {
    console.log(input);
    if (!input) {
      return "";
    } else {
      return input.replace(
        /\b((?!=|\,|\.).)+(.)\b/g,
        first => first.substr(0, 1).toUpperCase() + first.substr(1)
      );
    }
  }
}

Answer 1

You can use .toUpperCase() and .toLowerCase() along with .substring() to achieve the effect like so:

 function turnIntoSentence(){ var input = document.getElementById("input"); input.value=input.value.substring(0,1).toUpperCase()+input.value.substring(1).toLowerCase(); }

 <input id="input" type="text" oninput="turnIntoSentence()">

We can force the first letter to be uppercase, and the remaining letters to be lowercase.

 var input = document.getElementById("input"); function turnIntoSentence(){ input.value=input.value.substring(0,1).toUpperCase()+input.value.substring(1).toLowerCase(); } input.addEventListener("keyup", function(event) { if (event.getModifierState("CapsLock")) { input.value=input.value.toUpperCase(); }else{ turnIntoSentence(); } });

 <input id="input" type="text" oninput="turnIntoSentence()">

You can also leverage an event listener to allow for capitals when CAPS LOCK is enabled.

In the case that you have multiple input fields:

 var input = document.getElementsByClassName("input"); function turnIntoSentence(){ for(var i = 0; i < input.length; i++){ input[i].value=input[i].value.substring(0,1).toUpperCase()+input[i].value.substring(1).toLowerCase(); } }

 <input class="input" type="text" oninput="turnIntoSentence()"> <input class="input" type="text" oninput="turnIntoSentence()"> <input class="input" type="text" oninput="turnIntoSentence()">

Answer 2

I think you want something like this:

In your html :

<input  type="text" class="form-control" id="input1" placeholder="Name"
        formControlName="name"
        name="name"
        #name
        required 
        (input)="handleInputChange(name.value)"/>

In your ts :

handleInputChange(val: string){  
  val = val.substr(0,1).toUpperCase() + val.substr(1);
  this.form.name.setValue(val);
}