CODEWITHSUNDEEP
angularangular-material
Mohit Kumar Sharma
Mohit Kumar Sharma

Reputation: 667

Conditional Mask Class in Angular

I am working on project using Angular 13 and Angular Material Design. In this I have form in which there is ** contact dropdown** containing fields like Mobile, Home, Office, Fax, Pager, Other. In this mask="(000) 000-0000" has been set to all the the dropdown values. But I need to remove the mask when Pager is selected. I tried different solution like using ternary operator like mask="item.name==='Pager'?'': (000) 000-0000" but that didn't work. Below are the code files and snapshot for better understanding

list.component.html

      <div class="d-flex justify-content-between form-row mt-24" *ngFor="let item of phoneArr;let i = index">
        <div class="w-100 pr-15">
          <mat-form-field class="w-100">
            <mat-select #typeOfNumber="ngModel" [(ngModel)]="item.name" [name]="item + '__' + i" required>
              <ngx-mat-select-search [(ngModel)]="PhoneNumberTypeSearch" placeholderLabel="Select Phone"
                noEntriesFoundLabel="Not Found" name="search"></ngx-mat-select-search>
              <mat-option *ngFor="let i of type_of_contact |stringFilterBy:PhoneNumberTypeSearch:'name'"
                [value]="i.name">
                {{i.name}}
              </mat-option>
            </mat-select>
          </mat-form-field>
        </div>
        <div class="d-flex w-100 pl-15">
          <mat-form-field class="w-100">
            <mat-label>{{item.name}} contact</mat-label>
            <input matInput placeholder="  (989) 989-9898" name="item.name + '_' + i + 1 + {{item.id}}"
              [(ngModel)]="item.value" maxlength="14" [checkDuplicatefield]="[physician.phone_numbers,i]"
              mask="item.name==='Pager'?'': (000) 000-0000">
            <!-- mask="(000) 000-0000" -->
          </mat-form-field>
        </div>
        <div class="act pl-15">
          <mat-icon _ngcontent-egi-c18="" aria-hidden="true" *ngIf="i==0"
            class="mat-icon mt-20 material-icon basecolor cursor notranslate material-icons mat-icon-no-color"
            mat-raised-button="" role="img" (click)="addPhysicianPhone(physicianForm, item)">
            add_circle
          </mat-icon>
        </div>
      </div>

Screenshot

Not Allowing to enter character

Any solution ?

Upvotes: 0

Views: 1571

Answers (1)

Ashot Aleqsanyan
Ashot Aleqsanyan

Reputation: 4453

You need to use binding. [] brackets

Try this.

  <mat-form-field class="w-100">
            <mat-label>{{item.name}} contact</mat-label>
            <input matInput placeholder="  (989) 989-9898" name="item.name + '_' + i + 1 + {{item.id}}"
              [(ngModel)]="item.value" maxlength="14" [checkDuplicatefield]="[physician.phone_numbers,I]"
              [mask]="item.name==='Pager'? '' : '(000) 000-0000'">
            <!-- mask="(000) 000-0000" -->
          </mat-form-field>

Upvotes: 3

Related Questions