Angular 9 - 自定义验证器组

Question

我是运行一个使用 Angular CLI 9.0.7 的应用程序。在此应用程序中，有一个表单包含一组需要验证的控件。为此，我创建了一个可以重复使用的自定义验证器。

我的问题是方法中的代码从未执行过。

如何正确调用方法 isCpf 并使用良好的实践？

这是我的组件

        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

这是我的Html组件

            <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>

这是我的自定义验证器。

    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 };

                }
            }
        };
    }

我认为错误就在这里

    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 };

                }
            }
        };
    }

Answer 1

问题已解决。我只是不再 return 函数了。

这可能不是最优雅的解决方案，但至少我节省了时间。谢谢大家

    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 };
            }
        }
    }

Angular 9 - 自定义验证器组

Angular 9 - Custom Validator Group

angular

typescript

code-reuse

customvalidator