How to apply LowerCasePipe to transform user input before form submission

Question

Can you tell me How to apply LowerCasePipe to transform user input before form submission?

Answer 1

To apply LowerCasePipe to transform user input before form submission in Angular, manually use the pipe in your component code, as pipes don't automatically transform form input values.

Example (Reactive Form):

import { LowerCasePipe } from '@angular/common';

constructor(private lowerCasePipe: LowerCasePipe) {}

onSubmit() {

  const rawValue = this.form.get('username')?.value;

  const lowerCased = this.lowerCasePipe.transform(rawValue);

  this.form.get('username')?.setValue(lowerCased);

  

  // Now submit the form

}