angular-reactive-forms - 使用 Reactive-Forms 时如何在 Angular-8 中分离“实现的条件验证服务/功能”

Question

我已经在我的组件中实现了条件验证。我正在尝试将验证逻辑从我的组件分离到另一个组件/服务。

演示链接：http://StackBlitz%20https://stackblitz.com/edit/angular-amr86r

Answer 1

您可以使用 轻松应用条件验证@rxweb/reactive-form-validators。我已经通过验证器和基于装饰器的方法应用了所需的验证。请参阅工作示例。

使用基于装饰器的方法：

你只需要使用@required()你想在模型属性上应用的条件来应用装饰器。

这是完整的模型代码：

import {  required } from   "@rxweb/reactive-form-validators"   

export class UserInfo {

    @required() 
    firstName: string;

    @required({conditionalExpression:'x => x.firstName == "Bharat"' }) 
    lastName: string;

}

使用基于验证器的方法：

对于基于验证器的方法，您只需提及RxwebValidators.required()要在表单控件上应用的条件。

这是完整的组件代码：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from "@angular/forms"
import { RxwebValidators } from '@rxweb/reactive-form-validators';

@Component({
    selector: 'app-validator-based-validator',
    templateUrl: './validator-based.component.html'
})
export class ValidatorBasedValidationComponent implements OnInit {
    validatorBasedFormGroup: FormGroup

    constructor(
        private formBuilder: FormBuilder )
    { }

    ngOnInit() {
        this.validatorBasedFormGroup = this.formBuilder.group({
            firstName:['', RxwebValidators.required()],
            lastName:['', RxwebValidators.required({conditionalExpression:'x => x.firstName == "Bharat"' })]
        });
    }
}

注意：如果您将使用验证器方法，您可以在单独的文件中创建一个函数，并在条件表达式属性中使用相应的函数。无论如何，模型文件将以基于装饰器的方法分离。