如何在使用反应式表单时分离Angular-8中的“实现的条件验证服务/函数”

Question

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

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

Answer 1

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

使用基于装饰器的方法的：

你只需要在你的模型属性上应用@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"' })]
        });
    }
}

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