Change the input Mask when the select value is changed

Question

Good afternoon, you guys! I have a form and in it I have a select with the options (Phone and Mobile) and I also have an input for the user to fill in the number. I want that when the user selects the Phone option he trims the mask Mask="[phone]" and when he selects the Cellular option appear the Mask="(00) 00000-0000". Can someone help us? Follow picture:

Follows the code:

<div class="form-group col-12 col-sm-4">
     <label class="form-label" for="">Tipo <span class="text-danger">*</span> </label>
         <select class="custom-select" formControlName="phoneType">
             <option value=null selected=""></option>
             <option value="1">Telefone</option>
             <option value="2">Celular</option>
         </select>
</div>

<div class="form-group col-12 col-sm-4 ">
  <label class="form-label" for="phone">Número <span class="text-danger">*</span> </label>
  <input mask="(00) 00000-0000" formControlName="phone" type="text" class="form-control" id="celular"placeholder="">                 
<div *ngIf="submitted && basicInfo.controls.phone.errors" class="text-danger">
<div *ngIf="submitted && basicInfo.controls.phone.errors">Campo obrigatório</div>
</div>

Answer 1

Good afternoon, everyone, to come up with a solution and I’ll leave here the form I’ve solved. In the html component itself I added the following code:

 <input  mask="{{ phone.get('phone').value.length === 11 ? '(00) 00000-0000' : '(00) 0000-00009'}}"formControlName="phone" name="phone" type="text" class="form-control" placeholder="">    

Thank you!!!

Answer 2

Assuming you are using ngx-Mask, a different solution is proposed on the module page.

<input mask="[phone]||(00) 0 0000-0000" />

With this the mask will behave like cell phone when you need more numbers in the field.

UPDATE:

Try to put Mask into an attribute and put into Mask via Binding

[mask]="telefone"

And by selecting the "Type" you modify the phone to be one or the other.