Validators not showing error message in Angular (14) - html

Question

I have built a modal component with 1 textfield and a submit button, with a required validator on that specific textfield. It seems the Validator is working, but somehow the validator error message is not shown.
The typescript code for the component:
#Injectable()
export class AddOrganizationComponent implements OnInit {
public addOrganizationFormGroup: FormGroup;
public submittedAddOrganization = false;
modalService: BsModalService;
formModal: BsModalRef;
form = {
class: "modal-dialog-centered modal-sm"
};
constructor(private addOrganizationFormBuilder: FormBuilder,
private injector: Injector) {
}
ngOnInit(): void {
this.enableAddOrganizationForm();
}
public openAddOrganizationModal() {
this.modalService = this.injector.get(BsModalService);
this.formModal = this.modalService.show(AddOrganizationComponent, this.form);
}
public addOrganization() {
this.submittedAddOrganization = false;
if(this.addOrganizationFormGroup.invalid) {
console.log('Yes is invalid ');
} else {
console.log('Adding Organization function!');
}
}
get addOrganizationFormGroupControls() {
return this.addOrganizationFormGroup.controls;
}
public enableAddOrganizationForm() {
this.addOrganizationFormGroup = this.addOrganizationFormBuilder.group({
organizationName: ['', Validators.required]
});
}
}
The HTML code for the component:
<div class="modal-header text-center">
<div class=" modal-body p-0">
<h6 class=" modal-title" id="modal-title-default">
Add Organization
</h6>
<div class=" card bg-secondary border-0 mb-0">
<div class=" card-header bg-transparent pb-3">
<div class=" text-muted text-center mt-2 mb-3">
<small>Type in the name of your new Organization</small>
</div>
</div>
<div class="card-body">
<form role="form" [formGroup]="addOrganizationFormGroup">
<div class="form-group mb-3">
<div class="input-group input-group-alternative">
<input class="form-control" maxlength="20" placeholder="Enter Organization name" type="text" id="organizationNameText" formControlName="organizationName"
[ngClass]="{ 'is-invalid': submittedAddOrganization && addOrganizationFormGroupControls.organizationName.errors }"/>
<div *ngIf="submittedAddOrganization && addOrganizationFormGroupControls.organizationName.errors" style="color:red;font-size:small">
<div *ngIf="addOrganizationFormGroupControls.organizationName.errors.required">A team name is required</div>
</div>
</div>
<div>
<p class="text-muted" *ngIf="addOrganizationFormGroupControls.organizationName.value">{{addOrganizationFormGroupControls.organizationName.value.length}} / 20</p>
</div>
<br/>
</div>
<div class="text-center">
<button type="button" class="btn btn-primary my-4" (click)="addOrganization()">
Add Organization
</button>
</div>
</form>
</div>
</div>
</div>
</div>
I have searched high and low. It seems the validation is working, but the text is not shown, am I missing something or really looking over something small here?

Answer 1

In method called on button click - addOrganization() - you are setting the submittedAddOrganization to false. However, you are expecting it to be true to display the error. Thus: set it to true in button-click handler method.