Angular 7 个带有 dynamic/updated 参数的自定义验证

Question

我正在使用 angular 7 和 material 设计组件

我需要将 requireMatch 验证添加到 mat-autocomplete。

我已经使用参数创建了自定义验证，但参数值会动态变化。

下面是我的组件代码。

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

我面临的问题是我总是在 requireMatch 内的 accessCodes 中变空（初始化）。

this.accessCodeList 的更改不会反映到验证器。

意思是在更改 this.accessCodeList 之后它没有在 requireMatch 验证器中更新数组。

所以有人知道如何在自定义验证器中传递动态参数吗？

Answer 1

根据我的假设，您想将用户输入与带有 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

Answer 2

这样调用时需要绑定校验函数，否则校验函数不会绑定输入的accessList

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

此外，如果您想限制字段中的某些单词，您可以在此处查看我的 npm 包之一 https://www.npmjs.com/package/ng4-validation

Answer 3

要使您的验证器使用控制器中的最新值运行，您可以将其作为函数传递并在需要时解析。因此您的验证器函数将获得最新或当前值。

下面的代码将对我的回答提供一些见解

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

Angular 7 个带有 dynamic/updated 参数的自定义验证

Angular 7 custom validation with dynamic/updated param

angular

angular-reactive-forms

angular-validation

angular-validator