Validators not showing error message in Angular (14)

Issue

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?

Solution

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.

Answered By - Misha Mashina