Validation personnalisée Angular 7 avec paramètre dynamique / mis à jour

Selon mon hypothèse, vous souhaitez comparer l'entrée utilisateur avec le tableau de chaînes avec le FormControl. Ainsi, vous pouvez obtenir l'index d'un élément et vérifier s'il n'est pas égal à -1 comme:

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

Code 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;
    }
  }
}

Code HTML:

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;
}

StackBlitz

Vous devez lier la fonction de validation lorsque vous l'appelez comme ceci, sinon la fonction de validation ne liera pas l'entrée accessList

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

Aussi si vous voulez restreindre un mot dans le champ, vous pouvez avoir regardez l'un de mes packages npm ici https://www.npmjs.com/package/ng4- validation

Pour faire fonctionner votre validateur avec la dernière valeur du contrôleur, vous pouvez le transmettre en tant que fonction et le résoudre chaque fois que cela est nécessaire. afin que votre fonction de validation obtienne la dernière valeur ou la valeur actuelle.

Le code ci-dessous vous donnera un aperçu de ma réponse

// 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;
    }
}