我已经在我的组件中实现了条件验证。我正在尝试将验证逻辑从我的组件分离到另一个组件/服务。
演示链接:http://StackBlitz%20https://stackblitz.com/edit/angular-amr86r
我已经在我的组件中实现了条件验证。我正在尝试将验证逻辑从我的组件分离到另一个组件/服务。
演示链接:http://StackBlitz%20https://stackblitz.com/edit/angular-amr86r
您可以使用 轻松应用条件验证@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"' })]
});
}
}
注意:如果您将使用验证器方法,您可以在单独的文件中创建一个函数,并在条件表达式属性中使用相应的函数。无论如何,模型文件将以基于装饰器的方法分离。