Угловой 7 При изменении значения раскрывающегося списка для определенного значения, валидатор не выполнялся (условные пользовательские валидаторы) - PullRequest
Новая
       29

Угловой 7 При изменении значения раскрывающегося списка для определенного значения, валидатор не выполнялся (условные пользовательские валидаторы)

0 голосов
/ 13 ноября 2018

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

Элемент управления в форме раскрывающегося списка содержит несколько значений, а также при изменении пользователяэто к u_id Мне нужно добавить, чтобы запустить новый валидатор в элементе управления формы, чтобы получить число u_id в соответствии с определенным форматом: 

<mat-select id="gov_id_type" formControlName="gov_id_type" placeholder="Gov. ID Type">
   <mat-option value="birth_certificate">Birth Certificate</mat-option>
   <mat-option value="regular_id">ID Card</mat-option>
   <mat-option value="u_id">UID</mat-option>
<mat-select>

И элемент управления формы, где должен быть добавлен новый валидаторпри выборе u_id: 

<mat-form-field color="warn" appearance="outline">
   <mat-label>Gov. ID Number</mat-label>
   <input matInput id="gov_id_number" formControlName="gov_id_number" placeholder="Gov. ID Number">
</mat-form-field>&nbsp;

Я создал специальный валидатор, чтобы проверить, имеет ли gov_id_number следующий формат, если выбран u_id, иначе система может принять любой тип формата: 

import { AbstractControl } from '@angular/forms';

export function uIdValidation(control: AbstractControl)
{
    const regex = /^[A-Z][0-9]{3}-[0-9]{2}[C]{1}[0-9]{5}$/i;
    let val = control.value;
    if(!regex.test(val))
    {
        return {response: true};
    }
    return null;
}

Регулярное выражение /^[A-Z][0-9]{3}-[0-9]{2}[C]{1}[0-9]{5}$/i означает, что идентификатор должен быть таким:

Q12-12C12345

Первые 3 буквы алфавитно-цифровые с заглавной буквызначения, затем -, затем 2 цифры, затем буква C, а затем 5 цифр в конце.

Я сделал функцию машинописи, используя valueChanges и setValidator: 

runValidator(){
    let gov_id_number = this.formGroup.get('gov_id_number');
    this.formGroup.controls['gov_id_type'].valueChanges.subscribe(
      (mode: String)=>{
        console.log(mode)
        if(mode=='u_id')
        {
          gov_id_number.setValidators([uIdValidation])
        }
        else
        {
          gov_id_number.clearValidators()
        }
      }
    );
  }

Конечно, uIdValidation это импортed: 

import { uIdValidation } from 'src/app/dashboard/custom-validators/unIdValidation';

И я добавил runValidator() в ngOnInit() крючок, как упомянуто в этого урока

Когда я изменяю выпадающий список на значение u_id,валидатор не запускается сразу.Я должен выбрать другое значение, затем u_id, чтобы валидатор мог работать как положено.И еще одна проблема заключается в том, что когда я снова изменяю его с u_id на другие значения, валидатор не очищается.

Я пытался запустить функцию для события (selectionChange) в выпадающем списке: 

<mat-select id="gov_id_type" (selectionChange)="runValidator()" formControlName="gov_id_type" placeholder="Gov. ID Type">

Это не сработало.Если я выбрал u_id в начале, он не запустит валидатор, и когда я выберу его снова, он будет работать.

Вот stackblitz .

Я думаю, что есть проблема и с RegEx.

...