Why is my *ngIf condition not recognizing the error and displaying the message when the condition is met? - validation

Question

I have a custom validator that I am applying to an input field. My ngIf condition should display an error message if the form value has an error specific to the custom validator. It does not display the message, I cannot figure out why.
In my TS file:
export class ParentFinancialComponent implements OnInit {
// Set selected section value on load time.
selectedSectionGroup = {
sectionOne: false,
sectionTwo: true,
sectionThree: true,
sectionFour: true,
sectionFive: true,
sectionSix: true
};
public financialSectionTwo: FormGroup;
ngOnInit() {
this.initForm();
}
initForm() {
this.financialSectionTwo = this.formBuilder.group({
parents2017AdjustedGrossIncome: ['', [CustomValidators.onlyNumbers]],
parents2017IncomeTaxAmount: ['', [CustomValidators.onlyNumbers]],
parents2017TaxExemption: ['', [CustomValidators.onlyNumbers]]
});
get sectionTwo() { return this.financialSectionTwo.controls; }
}
In my HTML:
<div [hidden]="selectedSectionGroup.sectionTwo" class="tab-pane
fade show active"
id="{{financialSectionEnum.SECTION_TWO}}" role="tabpanel">
<form [formGroup]="financialSectionTwo">
<p class="section-header">Section II</p>
<div class="form-group row"
[hidden]="sectionOne.parentsIrsStatus.value === '3'">
<p class="col-lg-9"><b class="q-num">89)</b><span
[hidden]="sectionOne.parentsIrsStatus.value !== '1'"
class="form-required">*</span>Income for 2017?<i
class="fa fa-info-circle" aria-hidden="true"></i></p>
<div class="col-lg-3">
<label class="sr-only">Adjusted gross
income</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">$</div>
</div>
<input
maxlength="9"
formControlName="parents2017AdjustedGrossIncome"
id="parents2017AdjustedGrossIncome"
type="text"
class="form-control col-3 col-lg-12"
data-hint="yes"
>
<div class="input-group-append">
<div class="input-group-text">.00</div>
</div>
<div
*ngIf="sectionTwo.parents2017AdjustedGrossIncome.touched &&
sectionTwo.parents2017AdjustedGrossIncome.errors.onlyNumbers"
class="alert text-danger m-0 p-0 col-md-12"
>
Enter an amount
</div>
</div>
</div>
If i enter an alphabet, I should get the error message "Enter an amount". I have other inputs that depend on multiple custom validators, so checking to see if the input field is just "invalid" will help me. I need the message to display only if a specific custom validator is triggered.

Answer 1

You didn't include the implementation for your custom validator: CustomValidators.onlyNumbers so can't say what is wrong with the logic... however, the following implementation could get what you wanted !!
validator:
CustomValidatorsOnlyNumbers(control: AbstractControl) {
var pattern = /^\d+$/;
if ( pattern.test(control.value) == true ){ return true;} else {
return { onlyNumbers: true };
}
}
relevant HTML:
<div class="tab-pane fade show active"
role="tabpanel">
<form [formGroup]="financialSectionTwo">
<p class="section-header">Section II</p>
<div class="form-group row" >
<p class="col-lg-9"><b class="q-num">89)</b><span
class="form-required">*</span>Income for 2017?<i
class="fa fa-info-circle" aria-hidden="true"></i></p>
<div class="col-lg-3">
<label class="sr-only">Adjusted gross
income</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">$</div>
</div>
<input
maxlength="9"
formControlName="parents2017AdjustedGrossIncome"
type="text"
class="form-control col-3 col-lg-12"
data-hint="yes"
>
<div class="input-group-append">
<div class="input-group-text">.00</div>
</div>
<div
*ngIf="financialSectionTwo.get('parents2017AdjustedGrossIncome').touched && financialSectionTwo.get('parents2017AdjustedGrossIncome').hasError('onlyNumbers')"
class="alert text-danger m-0 p-0 col-md-12"
>
Enter an amount
</div>
</div>
</div>
</div>
</form>
</div>
complete working stackblitz here