Блог

Я использую angular 7 с компонентами material design

У меня есть требование добавить проверку соответствия требованиям в mat-автозаполнение.

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

Ниже приведен код моего компонента.

 this.stepFormGroup = this.formBuilder.group({
    AccessCode: ["", [Validators.required, this.requireMatch(this.accessCodeList)]]
});

////require-match validation for access-code
requireMatch = (accessCodes: string[]) => {
    return (control: FormControl) => {
        const selection: any = control.value;
        console.log("accessCodes", accessCodes, "selection", selection);
        if (accessCodes.indexOf(selection)===-1) {
            return { requireMatch: true };
        }
        return null;
    }
}
  

Проблема, с которой я сталкиваюсь, в том, что я всегда получаю empty (init) accessCodes внутри requireMatch .

Изменения this.accessCodeList не отражаются на валидаторе.

Это означает, что после изменения this.accessCodeList он не получает обновленный массив в requireMatch валидаторе.

Итак, у кого-нибудь есть идеи о том, как передать динамический параметр в custom-validator?

Вам необходимо привязать функцию проверки при ее вызове следующим образом, иначе функция проверки не будет привязывать список доступа к входным данным

 [Validators.required, this.requireMatch(this.accessCodeList).bind(this)]
  

Также, если вы хотите ограничить какое-либо слово в поле, вы можете посмотреть один из моих пакетов npm здесьhttps://www.npmjs.com/package/ng4-validation

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

Приведенный ниже код даст некоторое представление о моем ответе

 // Component 
this.stepFormGroup = this.formBuilder.group({
    AccessCode: ["", [Validators.required, this.requireMatch(() => this.accessCodeList)]]
});

//Validator Function
requireMatch = (getAccessCodes: (() => string[])) => {
    return (control: FormControl) => {
        const selection: any = control.value;
        const accessCodes = getAccessCodes();
        console.log("accessCodes", accessCodes, "selection", selection);
        if (accessCodes.indexOf(selection)===-1) {
            return { requireMatch: true };
        }
        return null;
    }
}
  

Согласно моему предположению, вы хотите сравнить пользовательский ввод со строковым массивом с помощью FormControl. Таким образом, вы можете получить индекс элемента и проверить, не равен ли он -1 подобному:

 var index = accessCodes.indexOf(selection);
if (index != -1) { // That means item found in the array
  console.log('if')
  return { requireMatch: true };
}
else {
  // console.log('esle')
  return null;
}
  

TS-код:

 import { Component, Inject, OnInit } from '@angular/core';
import {
  FormBuilder,
  FormControl,
  FormGroup,
  Validators,
} from '@angular/forms';

@Component({
  selector: 'select-multiple-example',
  templateUrl: 'select-multiple-example.html',
  styleUrls: ['select-multiple-example.css'],
})
export class SelectMultipleExample implements OnInit {
  public stepFormGroup: FormGroup;
  accessCodeList: any[] = ['Prashant', 'Pimpale'];

  constructor(private fb: FormBuilder) {

  }

  public ngOnInit(): void {
    this.stepFormGroup = this.fb.group({
      AccessCode: ["", [Validators.required, this.requireMatch(this.accessCodeList)]]
    });
  }

  ////require-match validation for access-code
  requireMatch = (accessCodes: string[]) => {
    return (control: FormControl) => {
      const selection: any = control.value;

      console.log("accessCodes", accessCodes, "selection", selection);
      var index = accessCodes.indexOf(selection);
      if (index != -1) {
        console.log('if')
        return { requireMatch: true };
      }
      else {
        // console.log('else')
        return null;
      }
      return null;
    }
  }
}
  

HTML-код:

 <input [formControl]="stepFormGroup.get('AccessCode')">
  

StackBlitz