Hey guys, I'm having an issue with my input field. I want the text to display in sentence case as I type, but it keeps showing up in title case. For example, if I type
"hello hai how are you""Hello Hai How Are You""Hello hai how are you"Check out the DEMO here:
Take a look at DEMO2 with Pipe:
Here is the HTML code snippet:
<div class="col-md-6 mb-3">
<label for="input1">Input Field to be in sentence case</label>
<input type="text" class="form-control text-capitalize" id="input1" placeholder="Name"
formControlName="name"
name="name"
required />
</div>
And here is the second HTML code snippet:
<form [formGroup]="myForm">
<input formControlName="myNumber| titleCase" />
</form>
This is the corresponding TypeScript code:
this.myForm = this.fb.group({
myNumber: ["hello hai how are you"]
});
Lastly, here is the pipe.ts file content:
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)
);
}
}
}