Form validation - Checkbox, dropdown, radio and text field

app.component.html

<h2>Leave a comment</h2>
<form #f="ngForm" (ngSubmit)="submit(f)">
    <div ngModelGroup="contact" #contact="ngModelGroup">
        <div *ngIf="!contact.valid">...</div>
        <div class="form-group">
            <label for="firstName">First Name</label> 
            <input 
                required 
                minlength="3"
                maxlength="10"
                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>
        </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>
    <div class="form-group">
        <label for="contactMethod">Contact Method</label>
        <select ngModel name="contactMethod" id="contactMethod" class="form-control">
            <option value=""></option>
            <option *ngFor="let method of contactMethods"
            [ngValue]="method">{{method.name}}</option>
        </select>
    </div>
    <div *ngFor="let method of contactMethods"class="radio">
        <label>
            <input 
            ngModel
            type="radio" 
            name="contactMethod"
            [value]="method.id">
            {{method.name}}
        </label>
    </div>
    
    <div class="checkbox">
        <label>
            <input type="checkbox" ngModel name="isSubscribed" required> 
            Subscribe to mailing list
        </label>
    </div>
    <p>
        {{ f.value | json }}
    </p>
    <button 
        [disabled]="!f.valid"
        class="btn btn-dark">Submit
    </button>
</form>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'contact-form',
  templateUrl: './contact-form.component.html',
  styleUrls: ['./contact-form.component.scss']
})
export class ContactFormComponent {
  contactMethods = [
    { id: 1, name: 'Email'},
    { id: 2, name: 'Phone'},
  ];

  log(x) { console.log(x); }

  submit(f){
    console.log(f);
    console.log(f.value.contact.firstName);
    console.log(f.value.comment);
  }
}