在 Angular Reactive Forms 中使用跨字段验证时如何对所有表单控件强制执行必需的验证

Question

I have a form where all fields are dropdowns and are all required. There is also a condition where values between two different controls must be the same. I have added a custom validator to utilize cross-field validation, but the problem I run into is if a user answers the questions with the special rules it will mark the entire form (FormGroup) valid even if there are still dropdowns that have not been touched yet.

How can I maintain the cross-field validation in conjunction with requiring all fields to have a value? All the examples I see are very simple 2 field forms that match password/confirm or date ranges. My form has around 30 fields.

Code that creates the dynamic form:

      questions.forEach(question => {
        question.questions.forEach(child => {
          group[child.key] = new FormControl({ key: child.value } || '', Validators.required);
        });
      });

      return new FormGroup(group,
         [compareValues('26', '27', 'Questions 4 and 5 must have the same answer.')]);
    }

Custom Validator:

import { AbstractControl, ValidationErrors, ValidatorFn } from "@angular/forms";

export function compareValues(val1: string, val2: string, message: string): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const mustMatch1 = control.get(val1);
    const mustMatch2 = control.get(val2);

    if (mustMatch1 && mustMatch2) {
      return mustMatch2.value === '' || mustMatch1.value.key === mustMatch2.value.key ? null : { mustMatch: true, message: message }
    }
  };
}

Answer 1

As I mentioned in my comment above it was a misunderstanding in the validation process due to a bug I had in my FormControl initialization.

It turns out the FormControl always had a valid value. Even if child.value was undefined or an empty string there would always be an object with a key being set which still is considered a valid entry with how I have this setup.

Below is a change I made that cleaned up the validation and I have it working the way I intended.

Changing the previous:

  questions.forEach(question => {
    question.questions.forEach(child => {
      group[child.key] = new FormControl({ key: child.value } || '', Validators.required);
    });
  });

to the following:

  questions.forEach(question => {
    question.questions.forEach(child => {
      group[child.key] = new FormControl(child.value ? { key: child.value } : '', Validators.required);
    });
  });