Angular 11自定义验证

我一直在到处寻找，试图让自定义验证在angular 11中工作。到目前为止，我一直无法让它按预期工作

如果我使用Angular.io（如下）中的direct方法，则参数（称为“control”）未定义

 export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    const forbidden = nameRe.test(control.value);
    return forbidden ? {forbiddenName: {value: control.value}} : null;
  };
}

我可以让它至少显示一个控件对象，但值始终是空字符串

export function requiredIfTrue(control: AbstractControl) {
  const value = control.value;

  if (!value) {
      return null;
  }

  return value === '1' ? {requiredIfTrue:true}: null;
}

希望有人能帮忙

我将在下面包括我的html和ts

HTML:

TLDR： 如果从ddl中选择了某个值，则需要一个字段。目前，我能在网上找到的所有用于angular 11的方法都不起作用。请帮忙

更新： 这是可行的，但我想验证单个控件，而不是表单组。这样，即使在我不关心的控件上，函数也不会受到影响

---

提前谢谢你

如果我理解正确，您只希望在其他控件（下拉列表）中有特定值时需要第二个控件

有几种方法可以做到这一点

您可以从该控件中动态添加和删除所需的验证器

 this.fg.controls.typeControl.valueChanges.subscribe(value => {
 if(value === 'whatever'){ 
     this.fg.controls.fNameControl.setValidators([Validators.required]);
 } else { 
     this.fg.controls.fNameControl.clearValidators();
 }  );

这是侦听下拉列表上的更改，然后根据下拉列表的值从另一个控件中添加和删除所需的验证器

您可以像正在尝试的那样使用自定义验证器，但它将是一个“跨域”验证器。这意味着一个字段的有效性基于另一个字段的值

角度文档很好地解释了如何在此处执行此操作，

关键是您需要将验证器应用于包含两个控件的FormGroup，以便验证器中的AbstractControl包含两个FormControl，并使用其中一个（您的下拉列表）的值来验证另一个（fNameControl）的值，而不是单个FormControl

  this.fg = new FormGroup({
    typeControl: new FormControl('',[Validators.required]),
    fNameControl: new FormControl(''),
  }, {validators: YourCustomCrossFieldValidator });

验证器看起来像

    export const YourCustomCrossFieldValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
 //control is a reference to the FormGroup
  const typeControl = control.get('typeControl');
  const fNameControl = control.get('fNameControl');

  return typeControl && fNameControl && typeControl.value === 'whatever' && (!fNameControl.value || fNameControl.value.length === 0) ? { requiredIfTrue: true } : null;
};

编辑：我忘了提到的一件事是，当您在FormGroup中添加验证器时，默认情况下，错误将应用于该FormGroup，而不是任何单个控件

解决这个问题的一种方法是在验证程序中手动向控件添加一个错误，然后始终返回null（这样我们就不会在FormGroup上重复错误）

---

那么，不可能对单个字段执行此操作吗？还是只对表单组有效？根据文档，它看起来应该与表单控件一起工作，但是我无法让它读取实际值。我现在可以从表单组中获取值，但是没有应用验证。新代码：below

导出函数requiredIfTrue（fg:AbstractControl）{let control=fg.get（'typeControl'）；if（control==null）{return null；}else{let isRequired:any=control.value==1'？{requiredIfTrue:true}:null；isRequired==true？control.setValidators（[Validators.required]）：control.clearvidators（）；return isRequired}

ngOnInit（）：void{this.fg=new FormGroup（{typeControl:new FormControl（“”，[Validators.required]），fNameControl:new FormControl（“”），}，{Validators:requiredIfTrue}）

可以为单个控件编写自定义验证程序，但在您的情况下，如果没有一种骇人的解决方案，它将无法工作。您需要两个控件的值来确定另一个控件的有效性，因此您应该使用我上面提到的跨域验证。我建议使用angular为cust提供的函数签名om验证器，因为它几乎会迫使您正确地实现它。我在原始答案中添加了一些代码，这可能也会有所帮助。@DKidwell请查看我刚才更新的内容。

  this.fg = new FormGroup({
    typeControl: new FormControl('',[Validators.required]),
    fNameControl: new FormControl(''),
  }, {validators: YourCustomCrossFieldValidator });

    export const YourCustomCrossFieldValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
 //control is a reference to the FormGroup
  const typeControl = control.get('typeControl');
  const fNameControl = control.get('fNameControl');

  return typeControl && fNameControl && typeControl.value === 'whatever' && (!fNameControl.value || fNameControl.value.length === 0) ? { requiredIfTrue: true } : null;
};

fNameControl.setErrors({...fNameControl.errors, 'requiredIfTrue': {value: true}});
return null;