Topic: mdbInput text-capitalize class
                  
                  1001albertpadilla
                  free
                  asked 6 years ago
                
I have this code input mdbInput type="text" required [(ngModel)]="lastName" name="lastName" id="lastName" class="form-control form-control-sm custom-input-font text-capitalize">
I'm using text-capitalize class to TitleCase format what the user is writing. However, when the user types juan carlo -- this gets formatted to Juan Carlo in the display only. The [(ngModel)]="lastName" value remains juan carlo. I want to retain the TitleCase format in the ngModel. Is there an available class to do this?
                      
                      Bartosz Termena
                      staff
                        answered 6 years ago
                    
Dear @1001albertpadilla
Below an example of simple function which capitalize the first letter of all words in a string:
TS
text: string;
  ucFirstAllWords(str: string) {
    const pieces = str.split(' ');
    for (let i = 0; i < pieces.length; i++) {
      let j = pieces[i].charAt(0).toUpperCase();
      pieces[i] = j + pieces[i].substr(1);
    }
    return pieces.join(' ');
  }
and HTML
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="md-form">
        <input
          mdbInput
          type="text"
          name="text"
          [ngModel]="text"
          (ngModelChange)="text = ucFirstAllWords($event)"
          id="form1"
          class="form-control form-control-sm custom-input-font text-capitalize"
        />
        <label for="form1" class="">Example label</label>
        <p>Look at me! {{ text }}</p>
      </div>
    </div>
  </div>
</div>
Hope it helps!
Best Regards, Bartosz.
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- ForumUser: Free
 - Premium support: No
 - Technology: MDB Angular
 - MDB Version: 7.5.3
 - Device: Laptop
 - Browser: Chrome
 - OS: Win 10
 - Provided sample code: No
 - Provided link: No