如何在使用 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"' })]
        });
    }
}

注意：如果您將使用驗證器方法，則可以在單獨的文件中創建一個函數，並在條件表達式屬性中使用該相應的函數。 無論如何，模型文件將在基於裝飾器的方法中分離。