Angular中的跨字段验证

Question

我创建了下面的指令来创建跨领域验证遵循英雄之旅示例https://angular.io/guide/form-validation

这是我的代码：

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

export const ConsentReceivedValidator: ValidatorFn = (control: FormGroup): ValidationErrors | null => 
{
    const idNumber = control.get("idNumber");
    const consent = control.get("consentConfirmed");

    return idNumber && consent && idNumber.value !== null && consent.value === true ? { 
   "ConsentReceived": true } : null;
};

但是我得到以下错误：

Type '(control: FormGroup) => ValidationErrors | null' is not assignable to type 'ValidatorFn'.

这是在 html 中验证错误的方式：

    <div>
        <app-text-input-with-label labelText="ID Number" formControlItemName="idNumber"
            [form]="contactInformationForm">
        </app-text-input-with-label>
        <app-checkbox-with-label [labelText]="getConsentText()" checkboxItemName="consentConfirmed"
            [isContactInfo]="true" [form]="contactInformationForm">
        </app-checkbox-with-label>
        <div *ngIf="contactInformationForm.errors?.consentReceived"
            class="alert alert-danger alert-sm text-left mt-1">
            Please read and tick the box before proceeding.
        </div>
        <br>
        <app-reference-input [form]="contactInformationForm"></app-reference-input>
    </div>
</div>   

Answer 1

export const ConsentReceivedValidator: ValidatorFn = () => (control: FormGroup): ValidationErrors | null => 
{
    const idNumber = control.get("idNumber");
    const consent = control.get("consentConfirmed");

    return idNumber && consent && idNumber.value !== null && consent.value === true ? { 
   "ConsentReceived": true } : null;
};

验证器函数如下所示。你需要像这样使用它：

[ConsentReceivedValidator()]

或者只是删除打字，你可以使用它而不调用它。