1

I'm using Directive to handle input changes and apply a mask on the input value. But I can't apply the mask on the initial value on component init. Is there any way to apply the mask during form creation?

Code example:

export class VisitComponent implements OnInit {
    public form: FormGroup;
    constructor(private formBuilder: FormBuilder) {}

    ngOnInit() {
        this.form = this.formBuilder.group({
            name: ['', [Validators.required]],
            phone: ['9991234567'] // I want to format this value as (999) 123-45-67
        });
    }
}
oklymeno
  • 71
  • 4
  • 1
    Does this answer your question? [Mask for an Input to allow phone numbers?](https://stackoverflow.com/questions/37800841/mask-for-an-input-to-allow-phone-numbers) – Naren Nov 17 '21 at 12:36
  • @Naren I've found there how to use a mask on value changes but not for the initial value. I think I've already found the answer to the issue by myself. The point is to use replace for initial value and format it as well as in case of value change: `const value = '9991234567';` and then use it as value for phone with pattern than equals the mask: `phone: [value.replace(/^(\d{0,3})(\d{0,3})(\d{0,2})(\d{0,2})/, '($1) $2-$3-$4')]` – oklymeno Nov 17 '21 at 13:32

0 Answers0