how to make text to return always lowercase in Angular

Question

I have an input where user can search a chip and return a matched chip when they pressed enter but I'm wondering how I can make the input to return always lower case after enter is pressed since some time it look like a user can create two different chips, one with upercase and one with lowercase even though it will store only in lowercase.

For example right now,

User enter "CHART" with upper case -> it create "CHART" chip -> after browser is refresh, it show in lowercase "chart"

User enter "chart" with lowercase-> it create "chart" chip -> after browser is refresh, it show in lowercase "chart"

Also if a user create chip with uppercase first, it seem like they can create the same chip multiple time but if they create with lowercase first the input stop the user from creating the same chip multiple time and that is what I want.

TRYING TO DO

I just want to create only one chip if the user enter either with lowercase or uppercase and prevent if they try to create the same chips again either with uppercase or lowercase.

HTML

<input matInput #input [(ngModel)]="tagIn" (ngModelChange)="tagIn = $event.toLowerCase()" [formControl]="tagCtrl" [matAutocomplete]="auto" [matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes" (matChipInputTokenEnd)="add($event,null)">
</div>

This is exactly look like my project https://stackblitz.com/edit/angular-occkra but also have the same problem, user can create multiple tags with the same word like "Apple" 'APPLE" "ApPLe" instead of just one.

You should first determine how your chip should be named i.e. lowercase, titlecase or uppercase. Now having determined how it should be named, you can convert it to the case you want before creating the chip. — isAif, Jun 13 '20 at 06:32
I just want the chip to be named always with lowercase even if a user typed with Uppercase. for example, even if a user type "CHART" and pressed enter, it will still show up in lowercase. — , Jun 13 '20 at 06:35
I just think this might be a solution to prevent a user from creating like "CHART", "chart", "ChART', CHarT", "CharT"..etc — , Jun 13 '20 at 06:41
just use javascripts string.toLowerCase() function in your submit function — Tim Gerhard, Jun 13 '20 at 06:42
I tried value.toLowerCase; and I can't create duplicated tags for the same chip anymore but I still able to create all this "CHART", "chart", "ChART', CHarT", "CharT"...any suggestion — , Jun 13 '20 at 06:52
You can use a directive as shown at https://stackoverflow.com/a/37561412/2358409, simply use `toLowerCase()` instead of `toUpperCase()` — uminder, Jun 13 '20 at 07:11
why not simple in `add function` add `event.value=event.value.toLowerCase()`. I don't check it but must be work — Eliseo, Jun 13 '20 at 10:31
@Eliseo, I tried but still not working... still able to create "CHART", "chart", "ChART', CHarT", "CharT" :( — , Jun 13 '20 at 15:01
@uminder Please can you check this out...this is what my project look like https://stackblitz.com/edit/angular-occkra and also for this it able to create "Apple" "APPLE" "apPPLe" instead of just one — , Jun 13 '20 at 15:06
@Eliseo Please can you check this out...this is what my project look like https://stackblitz.com/edit/angular-occkra and also for this it able to create "Apple" "APPLE" "apPPLe" instead of just one — , Jun 13 '20 at 15:07

score 2 · Answer 1 · answered Jun 13 '20 at 09:22

2

Try using Lowercase Pipe in the HTML file.

https://angular.io/api/common/LowerCasePipe

{{ value | lowercase }}

answered Jun 13 '20 at 09:22

Ankit Gupta

47
5

Still not working... since I'm displying the chip on my input I'm not really sure where to placed that one. in the example, it placed inside
tag and not input :(...
– Jun 13 '20 at 15:00
Please can you check this out...this is what my project look like https://stackblitz.com/angular/qdxrokeqakb and also for this it able to create "Apple" "APPLE" "apPPLe" instead of just one. – Jun 13 '20 at 15:05

score 0 · Answer 2 · answered Jun 13 '20 at 17:19

Check the code and the comments

  add(event: MatChipInputEvent): void {
           const input = event.input;
           const value = event.value.toLowerCase(); //<--first to lowerCase

            // Better use findIndex
           const index=this.allFruits.findIndex((f) => f.toLowerCase() ===value)
           if (index>=0) { 
             this.fruits.push(this.allFruits[index]); //<--push the element of
                                                      // allFruits, not the "value"
             this.allFruits.splice(index,1)  //remove the fruit of the list
           }  

    // Reset the input value
    if (input) {
      input.value = '';
    }

    this.fruitCtrl.setValue(null);
  }

score 0 · Answer 3 · answered Jun 14 '20 at 15:39

I guess the lowercase pipe solved the issue. I just ran the project on stackblitz and it works fine for me.

    <mat-form-field class="demo-chip-list">
  <mat-chip-list #chipList>
    <mat-chip
      *ngFor="let fruit of fruits"
      [selectable]="selectable"
      [removable]="removable"
      (removed)="remove(fruit)">
      {{ fruit | lowercase }}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>
    <input
      placeholder="New fruit..."
      #fruitInput
      [formControl]="fruitCtrl"
      [matAutocomplete]="auto"
      [matChipInputFor]="chipList"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      [matChipInputAddOnBlur]="addOnBlur"
      (matChipInputTokenEnd)="add($event)"
    />
  </mat-chip-list>
  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
    <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
      {{ fruit | lowercase }}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

how to make text to return always lowercase in Angular

3 Answers3