时间戳

首页 > 解决方案 > 自定义反应形式验证器中的角度多个错误

angular - 自定义反应形式验证器中的角度多个错误

问题描述

我正在验证一个呼叫中心的表格，其中通常会按特定顺序填写字段。如果用户向前跳过，我想为多个字段引发错误。我发现以下工作：

  export const recordValidator: ValidatorFn = (control: FormGroup): ValidationErrors | null => {

    if(!firstField.value && !secondField.Value && !thirdField.value)    
    {
      firstField.setErrors({ "firstFieldError" : true});
      secondField.setErrors({ "secondFieldError" : true});

      return {"firstFieldError" : true, "secondFieldError" : true};

    }
  }

并且 firstField 和 secondField 都正确显示错误。

现在根据文档ValidationErrors 只是错误的映射。但它显然没有任何方法，所以我想我只是将现有映射转换为 ValidationErrors 并返回：

  export const recordValidator: ValidatorFn = (control: FormGroup): ValidationErrors | null => {

    if(!firstField.value && !secondField.Value && !thirdField.value)    
    {
      firstField.setErrors({ "firstFieldError" : true});
      secondField.setErrors({ "secondFieldError" : true});

      let errorMap = new Map();

      errorMap.set("firstFieldError",true);
      errorMap.set("secondFieldError",true);

      let errorValidators:ValidationErrors = errorMap;

      return errorValidators;

    }
  }

但它不会引发任何错误。

我的模板如下所示： 

<mat-form-field>
  <input formControlName="firstField" type="datetime-local" placeholder="First Field" [errorStateMatcher]="errorMatcher" matInput>                        
      <mat-error *ngIf="Form.errors?.firstFieldError">
      First field error!
      </mat-error>
</mat-form-field>

谁能帮我看看为什么第一个有效而第二个无效

标签： angulartypescriptangular-reactive-forms

解决方案

吉姆，自定义验证器不像你说的那样工作。您需要返回一个对象（或 null）。所以你的验证必须喜欢一些

export const recordValidator: ValidatorFn = (control: FormGroup): ValidationErrors | null => {
    let invalid=false
    const error={}
    if (!control.value.firstField && control.value.secondField)
    {
        error.firstFieldError=true;
        invalid=true;
    }
    if (!control.value.secondField && control.value.thirdField)
    {
        error.secondFieldError=true;
        invalid=true;
    }
    return invalid?error:null;
  }

看看我们如何从“控制”中获取价值——它是 formGroup——以及我们如何创建一个具有一两个属性的对象——如果你写检查，你可以在你的 .html 中看到——

{{form.errors|json}}

注意：我真的不了解您的验证器，并想象有人会考虑您问题中的描述

推荐阅读