Я запускаю приложение, используя 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 };
}
}
};
}