Как отделить `` реализованную службу / функцию условной проверки '' в 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"' })]
        });
    }
}

Примечание: если вы будете использовать подход с использованием валидатора, вы можете создать функцию в отдельном файле и использовать эту соответствующую функцию в свойстве условного выражения. В любом случае файл модели будет разделен с использованием декораторного подхода.