javascriptangulartypescriptngx-mask

How to add prefix to input?

I want to add prefix : 'https://' to input using ngx-mask *16.4.0. I have component using signal inputs like this:

<input
  [mask]="mask()"
  [required]="required()"
  [prefix]="prefix()"
/>

and use this in other as :

mask=""
prefix="https://"

And ofc. it doesnt work because mask is empty. If i try added S* A* it dont allow me to write . / ? etc... I was tried to adding customPattern but its not bound with input. InstantPrefix dont exist on this version. Prefix doesnt exist in newst one...

How i will be able to write url adress with this prefix ?

Expected result: https://test.ww.com, https://test.ww.ww?params

Link for stackblitz: stackblitz

Solution

  • Was able to do this with pattern input, we can write a regex specially for URLs matching.

    There are many answers on SO to find the pattern, but the implementation is below.

    Specify a regex to match the URL:

    export class DoNotDropSpecialCharacters {
  public testValue = new FormControl('');
  patterns = {
    Q: {
      pattern: new RegExp(`[A-z0-9@"_.~!*'();:@&=+$,/?%#]`), // ommited but you get the solution -> \[^-\]
    },
  };
}

    Then use this regex to filter out non URL characters.

    <input
mask="Q*"
prefix="https\:\/\/"
[formControl]="testValue" 
[patterns]="patterns"
type="text" />

    Full Code:

    import 'zone.js/dist/zone';
import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';

import { NgxMaskDirective, provideEnvironmentNgxMask } from 'ngx-mask';
import { FormControl, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'do-not-drop-special-characters',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule, NgxMaskDirective],
  template: `
    <input
    mask="A*"
    prefix="https\:\/\/"
    [formControl]="testValue" 
    [patterns]="patterns"
    type="text" />
  `,
})
export class DoNotDropSpecialCharacters {
  public testValue = new FormControl('');
  patterns = {
    A: {
      pattern: new RegExp(`[A-z0-9@"_.~!*'();:@&=+$,/?%#]`), // ommited but you get the solution -> \[^-\]
    },
  };
}
@Component({
  selector: 'my-app',
  standalone: true,
  imports: [DoNotDropSpecialCharacters, NgxMaskDirective],
  template: `
    <do-not-drop-special-characters/>
  `,
})
export class App {}

bootstrapApplication(App, {
  providers: [provideEnvironmentNgxMask()],
});

    Stackblitz Demo