Form validation

app.component.html

<h2>Leave a comment</h2>
<form>
    <div class="form-group">
        <label for="firstName">First Name</label> 
        <input 
            required 
            minlength="3"
            maxlength="10"
            pattern="banana"
            ngModel 
            name="firstName" 
            #firstName="ngModel"
            (change)="log(firstName)"
            type="text" 
            id="firstName" 
            class="form-control"> 
            <div *ngIf="firstName.touched && !firstName.valid"
            class="alert alert-danger mt-3">
                <div *ngIf="firstName.errors.required">
                    First Name is required
                </div>
                <div *ngIf="firstName.errors.minlength">
                    First Name must be more than {{ firstName.errors.minlength.requiredLength }} characters
                </div>
                <div *ngIf="firstName.errors.maxlength">
                    First Name must be less than 10 character
                </div>
                <div *ngIf="firstName.errors.pattern">
                    First Name doesn't match pattern
                </div>
            </div>
    </div>
    <div class="form-group">
        <label for="comment">Comment</label>
        <textarea 
            ngModel
            name="comment" 
            id="comment" 
            cols="30" 
            rows="10" 
            class="form-control">
        </textarea>
    </div>
    <button class="btn btn-dark">Submit</button>
</form>