如何在使用反应式表单时在 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"' })]
});
}
}

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