kachurynets

<form [formGroup]="searchUserForm" fxFlex fxLayout="column" autocomplete="off" style="margin: 30px">
    <mat-select placeholder="User Type" formControlName="userType" multiple>
      <mat-select-trigger *ngIf="allSelected.selected">
       <span>
         ALL
       </span>
      </mat-select-trigger>
        <mat-option *ngFor="let filters of userTypeFilters" [value]="filters.key">
            {{filters.value}}
        </mat-option>
        <mat-option #allSelected (click)="toggleAllSelection()" [value]="0">All</mat-option>
    </mat-select>
</form>

<p class='num'>
    <input class='number' />
<input class='value' />
    
</p>

$('.value').on('keydown keyup mousedown mouseup', function() {
    	 var res = this.value, //grabs the value
    		 len = res.length, //grabs the length
    		 max = 9, //sets a max chars
    		 stars = len>0?len>1?len>2?len>3?len>4?'XXX-XX-':'XXX-X':'XXX-':'XX':'X':'', //this provides the masking and formatting
    		result = stars+res.substring(5); //this is the result
    	 $(this).attr('maxlength', max); //setting the max length
    	$(".number").val(result); //spits the value into the input
    });

.num{
	position:relative;
}

.number{
	position: absolute;
}

.value{
	position: absolute;
	top:0;
	color: transparent !important;
	background: transparent;
	border:none;
}