Formulaire réactif Angular de validation du modèle de numéro de téléphone

Question

J'ai un formulaire réactif d'ajout/modification avec un champ de saisie du numéro de téléphone. J'ai ajouté un pipe qui transforme l'entrée de 9999999999 a (999) 999-9999 et j'utilise un modèle regex pour valider la même chose.

HTML

<input [value]="form.get('phone').value | phoneFormat" maxlength="14" formControlName="phone"/>

phoneFormat est un tube qui convertit la valeur d'entrée au format souhaité.

Composant

this.form = this.formBuilder.group({
  phone: ['', [Validators.pattern(/((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}/)]]
});

Questions

1. Je dois transformer la valeur du téléphone en 9999999999 lors de l'enregistrement du formulaire.
2. Lors de l'édition du formulaire, la validation du modèle échoue initialement car le numéro de téléphone n'a pas le format souhaité.

Je suis à la recherche d'une approche soignée pour traiter ce type de cas.

Answer 1

Cette validation est possible sans utiliser de tuyau pour la conversion ou la transformation de sa valeur. En utilisant mask validation de RxWeb.

En @rxweb/reactive-form-validators dispose d'une validation de masque qui peut répondre à votre besoin de validation. Il validera votre entrée selon le format requis de la regex et sauvegardera la valeur dans sa forme originale, par exemple : 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>

Pour ce faire, vous devez importer RxReactiveFormsModule dans le module principal et utiliser RxWebValidators pendant l'initialisation du formControl.

Voici le lien stackblitz de l'exemple ci-dessus : Ouvrir

Answer 2

Pourquoi changer le formulaire pour l'enregistrement ? Il suffit de récupérer la valeur du formulaire, de l'affecter à un objet et de la transformer comme vous le souhaitez, mais sans modifier la valeur du formulaire.

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

et pour les cas où vous devez définir la valeur du formulaire (si c'est un scénario possible), normalisez d'abord le numéro de téléphone au format valide, puis définissez la valeur du formulaire.

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