Angular проверка шаблона телефонного номера в реактивной форме - PullRequest
Новая
       30

Angular проверка шаблона телефонного номера в реактивной форме

1 голос
/ 20 июня 2020

У меня есть реактивная форма добавления / редактирования с полем ввода номера телефона. Я добавил канал, который преобразует ввод из 9999999999 в (999) 999-9999, и я использую шаблон регулярного выражения для проверки того же.

HTML

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

phoneFormat - это канал, который преобразует входное значение в желаемый формат.

Компонент 

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

Проблемы

  1. Мне нужно преобразовать значение телефона в 9999999999 при сохранении формы.
  2. При редактировании формы проверка шаблона сначала не выполняется, потому что номер телефона не желаемый формат.

Я ищу изящный подход к работе с этим типом дел.

Ответы [ 2 ]

1 голос
/ 22 июня 2020

Эта проверка возможна без использования конвейера для преобразования или преобразования его значения. Используя проверку mask RxWeb.

@ rxweb / reactive-form-validators имеет проверку маски, которая может удовлетворить ваши требования к проверке. Он проверит ваш ввод в соответствии с требуемым форматом регулярного выражения и сохранит значение в его исходной форме, например: 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>

Для реализации этого вам необходимо импортировать RxReactiveFormsModule в основной модуль и использовать RxWebValidators при инициализации formControl.

Вот ссылка stackblitz в приведенном выше примере: Открыть

0 голосов
/ 20 июня 2020

почему вы меняете форму для сохранения? просто получите значение формы, назначьте его объекту и трансформируйте по своему усмотрению. но не изменяйте значение формы. 

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

и для случаев, когда вам нужно установить значение формы (если это возможный сценарий), сначала нормализуйте номер телефона до допустимого формата, затем установите форму значение. 

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