Angular 窗体控件动态参数

wlzqhblo 于 2021-09-23 发布在 Java

关注(0)|答案(1)|浏览(286)

所以我有一个表单，我需要向其中添加验证器，并且只有当某个条件与另一个控件匹配时，才需要一些控件。做这件事的好方法是什么。我最初创建了一个自定义验证器函数，我将一个参数传递给该函数，以确定是否需要该函数，但无论我是否更新表单中的其他控件，它都会保留参数的原始值。

public static required(bookType: BookType, controlKey: string) {
        return (control: AbstractControl): ValidationErrors | null => {
            if(this.isRequired(bookType,controlKey)){
                return !control.value? {required: true} : null
            }
            return null;
        }
    }

表单图书类型最初是数字的，我将图书类型更改为打印，使其保持数字。
这感觉它应该是一个表单控件验证器，因为我正在验证一个值，而不是组。
什么是使这项工作成功的最好方法？

JavaScript Angular

来源：https://stackoverflow.com/questions/68320463/angular-form-control-dynamic-parameter

1条答案

按热度按时间

oiopk7p51#

您需要实现一个跨字段验证器。因此，您将能够在验证器函数中处理这些字段的值。细节：https://angular.io/guide/form-validation#cross-现场验证

const deliveryAddressRequiredValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
    const bookType = control.get('bookType');
    const deliveryAddress = control.get('deliveryAddress');

    if (bookType && deliveryAddress && bookType.value === 'PRINT' && Validators.required(deliveryAddress)) {
        return { deliveryAddressRequired: true };
    }

    // no validation for book type DIGITAL
    return null;
};

用法：

this.form = this.formBuilder.group({
    bookType: ['', [Validators.required]],
    deliveryAddress: [''],
}, {validators: deliveryAddressRequiredValidator});

要在模板中显示错误，请使用： form.errors?.deliveryAddressRequiredValidator

赞(0）回复(0）举报 2021-09-23

我来回答

Angular 窗体控件动态参数

1条答案

相关问题

热门标签

最新问答