Form validation - Checkbox, dropdown, text field

app.component.html

<form #f="ngForm" (ngSubmit)="submit(f)">
    <div ngModelGroup="contact" #contact="ngModelGroup">
        <div class="form-group">
            <label for="courseName">Course Name</label> 
            <input 
                required 
                minlength="5"
                maxlength="10"
                ngModel 
                name="courseName" 
                #courseName="ngModel"
                (change)="log(courseName)"
                type="text" 
                id="courseName" 
                class="form-control"> 
                <div *ngIf="courseName.touched && !courseName.valid"
                class="alert alert-danger mt-3">
                    <div *ngIf="courseName.errors.required">
                        Course Name is required
                    </div>
                    <div *ngIf="courseName.errors.minlength">
                        Name should be minimum {{ courseName.errors.minlength.requiredLength }} characters
                    </div>
                    <div *ngIf="courseName.errors.maxlength">
                        Course Name must be less than 10 character
                    </div>
                </div>
        </div>
    </div>
   
    <div class="form-group">
        <label for="categoryName">Category</label>
        <select 
        required 
        ngModel 
        #categoryName="ngModel"
        name="categoryName" id="categoryName" class="form-control">
            <option value=""></option>
            <option *ngFor="let cat of categories"
            [ngValue]="cat">{{cat.name}}</option>
        </select>
        <div *ngIf="categoryName.touched && !categoryName.valid">
            <div class="alert alert-danger mt-3" *ngIf="categoryName.errors.required">
                Category is required
            </div>
        </div>
    </div>
    
    <div class="checkbox">
        <label>
            <input type="checkbox" ngModel name="hasGuarantee" required> 
            30-day moneyback guarantee
        </label>
    </div>
    <p>
        {{ f.value | json }}
    </p>
    <button 
        [disabled]="!f.valid"
        class="btn btn-dark">Submit
    </button>
</form>