I have developed an application using Angular CLI 9.0.7 that includes a form with multiple controls requiring validation. To achieve this, I implemented a Custom Validator that can be reused.
However, I am facing an issue where the code within the validator method is not being executed.
Can someone guide me on how to correctly implement and call the isCpf method while following best practices?
This is the Component structure:
pessoaFisicaFormGroup: this.formBuilder.group({
numeroCpfForm: ['', [Validators.required, CpfValidator.cpfValido]],
numeroRgForm: ['', [Validators.required]],
estadoEmissorRgForm: ['', Validators.required],
}, { validator: RgValidator.rgValido }), // Two controls need to be validated here
Below is the 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="formgroup">
<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 here is the implementation of my Custom Validator:
static rgValido(groupControl: AbstractControl): any | null {
return (group: AbstractControl): { [key: string]: any } | null => {
const numeroRgControl: AbstractControl = group.get('numeroRgForm');
const estadoEmissorRgControl: AbstractControl = group.get('estadoEmissorRgForm');
if (!numeroRgControl) {
throw "rgValido::The 'numeroRgForm' field is not defined in the form.";
}
if (!estadoEmissorRgControl) {
throw "rgValido::The 'estadoEmissorRgForm' field is not defined in the form.";
}
console.log("Found the controls");
const numeroRg: string = numeroRgControl.value;
const estadoEmissorRg: string = estadoEmissorRgControl.value;
if (numeroRg === '' || estadoEmissorRg === '') {
return null;
}
else {
if (RgValidator.isRg(numeroRg, estadoEmissorRg)) {
return null;
}
else {
return { 'numeroRgValido': false };
}
}
};
}
Please review this section as there may be an error around here:
static rgValido(groupControl: AbstractControl): any | null {
console.log("This message gets printed");
return (groupControl: AbstractControl): { [key: string]: any } | null => {
console.log("But this message does not, as the return statement executes before this line.");
const numeroCpfControl: AbstractControl = groupControl.get('numeroCpfForm');
const numeroRgControl: AbstractControl = groupControl.get('numeroRgForm');
const estadoEmissorRgControl: AbstractControl = groupControl.get('estadoEmissorRgForm');
if (!numeroRgControl) {
throw "rgValido::The 'numeroRgForm' field is not defined in the form.";
}
if (!estadoEmissorRgControl) {
throw "rgValido::The 'estadoEmissorRgForm' field is not defined in the form.";
}
console.log("Found the controls");
const numeroRg: string = numeroRgControl.value;
const estadoEmissorRg: string = estadoEmissorRgControl.value;
if (numeroRg === '' || estadoEmissorRg === '') {
return null;
}
else {
if (RgValidator.isRg(numeroRg, estadoEmissorRg)) {
return null;
}
else {
return { 'numeroRgValido': false };
}
}
};
}