0

I am running an application using Angular CLI 9.0.7. In this application there is a form with a group of controls that needs to be verified. For this, I created a Custom Validator that can be reused.

My question is that the code inside the method is never executed.

How can I do to call the method isCpf correctly and using good practices?

This is my Component

        pessoaFisicaFormGroup: this.formBuilder.group({
          numeroCpfForm: ['', [Validators.required, CpfValidator.cpfValido]],
          numeroRgForm: ['', [Validators.required]],
          estadoEmissorRgForm: ['', Validators.required],
        }, { validator: RgValidator.rgValido }), // I want run this validation and get two controls to validate

This is my Html component

            <div formGroupName="pessoaFisicaFormGroup" *ngIf="pessoaFisica" class="row">

                <div class="form-group col-sm-12 col-md-6 col-lg-6 col-xl-6">
                    <label for="numeroCpfForm">CPF</label>
                    <input formControlName="numeroCpfForm" 
                           id="numeroCpfForm"
                           type="text" 
                           class="form-control"
                           [ngClass]="{ 'is-invalid': formErrors.numeroCpfForm }" 
                    />
                    <div *ngIf="formErrors.numeroCpfForm" class="invalid-feedback">
                        <div>{{formErrors.numeroCpfForm}}</div>
                    </div>
                </div>

                <div class="form-group col-sm-12 col-md-3 col-lg-4 col-xl-4">
                    <label for="numeroRgForm">RG</label>
                    <input formControlName="numeroRgForm" 
                           id="numeroRgForm" 
                           type="text"
                           class="form-control"
                           [ngClass]="{ 'is-invalid': formErrors.numeroRgForm || formErrors.pessoaFisicaFormGroup }" 
                    />
                    <div *ngIf="formErrors.numeroRgForm || formErrors.pessoaFisicaFormGroup" class="invalid-feedback">
                        <div>{{ formErrors.numeroRgForm ? formErrors.numeroRgForm : formErrors.pessoaFisicaFormGroup}}</div>
                    </div>
                </div>

                <div class="form-group col-sm-12 col-md-3 col-lg-2 col-xl-2">
                    <div class="form-group">
                        <label for="estadoEmissorRgForm">Estado Emissor</label>
                        <select formControlName="estadoEmissorRgForm"
                                id="estadoEmissorRgForm" 
                                class="form-control"
                                [ngClass]="{ 'is-invalid': formErrors.estadoEmissorRgForm }" 
                        >
                            <option selected></option>
                            <option *ngFor="let estado of estados" value="{{estado}}">{{estado}}</option>
                        </select>
                        <div *ngIf="formErrors.estadoEmissorRgForm" class="invalid-feedback">
                            <div>{{formErrors.estadoEmissorRgForm}}</div>
                        </div>
                    </div>
                </div>
            </div>

and this is my Custom Validator.

    static rgValido(groupControl: AbstractControl): any | null {
        return (groupControl: AbstractControl): { [key: string]: any } | null => {


            // This block never is executed, why?
            //
            const numeroRgControl: AbstractControl = groupControl.get('numeroRgForm');
            const estadoEmissorRgControl: AbstractControl = groupControl.get('estadoEmissorRgForm');

            if (!numeroRgControl) {
                throw "rgValido::O campo 'numeroRgForm' não está definido no formulário.";
            }
            if (!estadoEmissorRgControl) {
                throw "rgValido::O campo 'estadoEmissorRgForm' não está definido no formulário.";
            }

            console.log("achou os caras");

            const numeroRg: string = numeroRgControl.value;
            const estadoEmissorRg: string = estadoEmissorRgControl.value;

            if (numeroRg === '' || estadoEmissorRg === '') {
                return null;
            }
            else {
                if (RgValidator.isRg(numeroRg, estadoEmissorRg)) {
                    null;
                }
                else {
                    return { 'numeroRgValido': false };

                }
            }
        };
    }

I believe that error is around here

    static rgValido(groupControl: AbstractControl): any | null {
        console.log("this message is printed");

        return (groupControl: AbstractControl): { [key: string]: any } | null => {

            console.log("but this message no, because return before execute this statement");

            const numeroCpfControl: AbstractControl = groupControl.get('numeroCpfForm');
            const numeroRgControl: AbstractControl = groupControl.get('numeroRgForm');
            const estadoEmissorRgControl: AbstractControl = groupControl.get('estadoEmissorRgForm');

            if (!numeroRgControl) {
                throw "rgValido::O campo 'numeroRgForm' não está definido no formulário.";
            }
            if (!estadoEmissorRgControl) {
                throw "rgValido::O campo 'estadoEmissorRgForm' não está definido no formulário.";
            }

            console.log("achou os caras");

            const numeroRg: string = numeroRgControl.value;
            const estadoEmissorRg: string = estadoEmissorRgControl.value;

            if (numeroRg === '' || estadoEmissorRg === '') {
                return null;
            }
            else {
                if (RgValidator.isRg(numeroRg, estadoEmissorRg)) {
                    null;
                }
                else {
                    return { 'numeroRgValido': false };

                }
            }
        };
    }

2

1 Answer 1

1

The problem was solved. I just don't return a function anymore.

This may not be the most elegant solution, but at least I save time. Thank you all.

    static rgValido(groupControl: AbstractControl): any | null {
        const numeroRgControl: AbstractControl = groupControl.get('numeroRgForm');
        const estadoEmissorRgControl: AbstractControl = groupControl.get('estadoEmissorRgForm');

        if (!numeroRgControl) {
            throw "rgValido::O campo 'numeroRgForm' não está definido no formulário.";
        }
        if (!estadoEmissorRgControl) {
            throw "rgValido::O campo 'estadoEmissorRgForm' não está definido no formulário.";
        }

        const numeroRg: string = numeroRgControl.value;
        const estadoEmissorRg: string = estadoEmissorRgControl.value;

        if (numeroRg === '' || estadoEmissorRg === '') {
            return null;
        }
        else {
            if (RgValidator.isRg(numeroRg, estadoEmissorRg)) {
                null;
            }
            else {
                return { 'rgValido': false };
            }
        }
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.