FormValidationBootstrap

This project was generated with Angular CLI version 12.1.1.

This project helps to implement the library ng-bootstrap-form-validation to makes bootstrap form validation easy.

pros

The error messages will displayed automatically, so you don't need to do something like this:

<form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
    <div class="row">
        <div class="form-group">
            <label for="name">Name</label>
            <input type="text" class="form-control" formControlName="name">

            <div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert">
                <div *ngIf="name.errors?.required">
                    Name is required.
                </div>
                <div *ngIf="name.errors?.minlength">
                    Name must be at least 4 characters long.
                </div>
                <div *ngIf="name.errors?.forbiddenName">
                    Name cannot be Bob.
                </div>
            </div>
        </div>
        <div class="form-group">
            <button class="btn" type="submit">Submit</button>
        </div>
    </div>
</form>

Instead, your code will looks like:

<form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
    <div class="row">
        <div class="form-group">
            <label for="name">Name</label>
            <input type="text" class="form-control" formControlName="name">
        </div>
        <div class="form-group">
            <button class="btn" type="submit">Submit</button>
        </div>
    </div>
</form>

Development server

Run ng serve for a dev server.

Navigate to http://localhost:4200/.

The app will automatically reload if you change any of the source files.