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>

第一个字段错误！

---

有人能帮我看看为什么第一个有效，第二个无效吗Jim，自定义验证器不能像你说的那样工作。您需要返回一个对象（或null）。所以你的Valitadio一定喜欢

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——以及我们是如何创建一个具有一个或两个属性的对象的——如果您编写check，您可以在您的.html中看到-

{{form.errors|json}}

---

注意：我真的不理解你的验证器，想象一个验证器计算你问题中的描述，因为它不是地图。它是一个具有属性的对象。你的验证器也错了。不允许设置错误。它应该返回一个对象，告诉已验证的表单组或已验证的表单控件是否有错误（以及哪些错误）。Angular然后根据验证器返回的内容设置组或控件错误和状态。好的，这很有意义。那么，在多个字段上设置错误的最佳实践是什么？每个控件都应该有自己的验证程序吗？如果控件的验证只依赖于它自己的值，那么它应该有自己的验证程序。如果它依赖于其他控件，那么它们应该位于表单组中，并且应该在表单组上设置验证器。