Angular reactive form phone number pattern validation

This validation is possible without using any pipe for conversion or transforming its value. By using mask validation of RxWeb.

The @rxweb/reactive-form-validators has mask validation which can fulfill your validation requirement. It will validate your input as per the required regex format and save the value in its original form eg : 9999999999

export class UserComponent implements OnInit {
    userFormGroup: FormGroup

    constructor(
        private formBuilder: FormBuilder ) { }

    ngOnInit() {
        this.userFormGroup = this.formBuilder.group({
            phoneNumber:['', RxwebValidators.mask({mask:'(999)-999 9999' })], 
        });
    }

    onSubmit(){
      console.log(this.userFormGroup.value);
    }
}

<div>
  <form  [formGroup]="userFormGroup">
    <div class="form-group">
      <label>Phone Number</label>
      <input type="text" formControlName="phoneNumber" class="form-control"  />
     <small class="form-text text-danger" *ngIf="userFormGroup.controls.phoneNumber.errors">                     {{userFormGroup.controls.phoneNumber.errors.mask.message}}<br/></small>    
    </div>
    <button [disabled]="!userFormGroup.valid" class="btn btn-primary" (click)="onSubmit()">Submit</button>
  </form>
</div>

For implementing this you need to import RxReactiveFormsModule in the main module and use RxWebValidators while formControl initialization.

Here is the stackblitz link of the above example : Open

why you change the form for saving? just get the form value, assign it to an object and transform it as you want. but do not change the form value.

save() {
    let formValue = this.form.value;
    formValue.phoneNumber = formValue.phoneNumber.match(/(\d+)/);
    // rest of the job
}

and for the cases that you need to set form value (if it's a possible scenario) first normalize the phone number to the format that is valid then set the form value.

normalize(val) {
    let formValue = val;
    const phoneFormatPipe = new phoneFormat();
    formValue.phoneNumber = phoneFormatPipe.transform(formValue.phoneNumber);
    this.form.patchValue(formValue);
}