I am facing an issue with my method that is supposed to display the specified HTML content. However, it seems like the ngIf condition within the code block is not functioning correctly. Can someone help me understand why the ngIf statement is being ignored?
<div class="field">
<label for="birthday">Birthday</label>
<mat-form-field class="example-full-width">
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker" id="birthday" [formControl]="birthdayFormControl" (dateInput)="calculateAge()" (dateChange)="calculateAge()">
<mat-hint>MM/DD/YYYY</mat-hint>
<mat-datepicker-toggle matIconSuffix [for]="picker">
</mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</div>
</div>
<ng-template *ngIf="isApplicantMinor()"> // - this part is not working as expected
<div class="row">
<div class="column">
<div class="field">
<label for="parentBirthday">Birthday</label>
<mat-form-field class="example-full-width">
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker" id="parentBirthday">
<mat-hint>MM/DD/YYYY</mat-hint>
<mat-datepicker-toggle matIconSuffix [for]="picker">
<!-- <mat-icon matDatepickerToggleIcon>keyboard_arrow_down</mat-icon>-->
</mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</div>
</div>
<div class="column">
<div class="field">
<label for="birthday">Parent's Email Address</label>
<mat-form-field class="example-full-width">
<mat-label>Email</mat-label>
<input type="email" matInput [formControl]="emailFormControl" [errorStateMatcher]="matcher"
placeholder="Ex. <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c7c6d784c69746d617c6069226f6361">[email protected]</a>">
<mat-hint>Enter your parents email!</mat-hint>
<mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
Please enter a valid email address
</mat-error>
<mat-error *ngIf="emailFormControl.hasError('required')">
Email is <strong>required</strong>
</mat-error>
</mat-form-field>
</div>
</div>
</div>
</ng-template>
In the TypeScript
isApplicantMinor(): boolean {
this.applicantIsMinor = false;
if (this.applicantAge < 18) {
this.applicantIsMinor = true;
}
return this.applicantIsMinor;
}
calculateAge() { // a date on string "22/10/1988
//debugger;
this.applicantIsMinor = false;
var dateString = moment(this.birthdayFormControl.value).format("MM/DD/YYYY") || moment(new Date().toDateString()).format("MM/DD/YYYY");
let age: number = 0;
if (dateString === undefined || dateString?.length === 0) {
dateString = new Date().toDateString();
}
var dateParts = dateString.split("/");
var dateObject = new Date(+dateParts[2], +dateParts[0], +dateParts[1]);
console.log(dateObject);
if (dateString) {
var timeDiff = Math.abs(Date.now() - new Date(dateObject).getTime());
age = Math.floor(timeDiff / (1000 * 3600 * 24) / 365.25);
console.log(age);
}
this.applicantAge = age;
if (this.applicantAge < 18) {
this.applicantIsMinor = true;
}
return age;
}