Question

我在Angular 8项目中有一个一次性使用的自定义验证器，用于根据另一个输入的值来确定是否需要输入。

@Directive({
    selector: '[appRequiredExplanation]',
    providers: [
        {
            provide: NG_VALIDATORS,
            useExisting: RequiredHardshipDirective,
            multi: true
        }
    ]
})
export class RequiredExplanationDirective implements Validator {
    @Input('appRequiredExplanation') otherValue = '';

    validate(control: AbstractControl): { [key: string]: any } | null {
        return this.otherValue === MyComponent.needsExplanationReason &&
        control.value === ''
            ? { required: { value: control.value } }
            : null;
    }
}

@Input中的当前otherValue是第一个无线电组的格式值。 MyComponent.needsExplanationReason是一个静态属性，其中包含需要其他信息的第一个无线电组的值。

我现在拥有另一个具有相同范例的组件，我想通过为该静态属性创建另一个@Input来使其可重用。

现在，我正在HTML中像这样访问它：

<textarea
    name="mainReasonExtraInfo"
    placeholder="Please provide additional information"
    [(ngModel)]="model.mainReasonExtraInfo"
    appRequiredExplanation="model.mainReason"
></textarea>

如果我向验证器添加另一个@Input，我将如何在DOM中提供该信息？

Answer 1

Angular documentation确实涵盖了如何执行此操作。我曾尝试使用谷歌搜索，但从未出现在前两页中。

您只需在指令中添加另一个@Input，然后继续向DOM元素添加更多属性即可。

export class RequiredExplanationDirective implements Validator {
    // Providing the name here allows us to assign a value to the declaration call.
    @Input('appRequiredExplanation') otherValue = '';
    @Input() compareValue = '';

    validate(control: AbstractControl): { [key: string]: any } | null {
        return this.otherValue === this.compareValue &&
        control.value === ''
            ? { required: { value: control.value } }
            : null;
    }
}

然后在您的DOM中将其设置为另一个属性。

<textarea
    name="mainReasonExtraInfo"
    placeholder="Please provide additional information"
    [(ngModel)]="model.mainReasonExtraInfo"
    appRequiredExplanation="model.mainReason"
    compareValue="needsExplanationReason"
></textarea>

将多个输入参数分配给Angular Validator

1 个答案: