Dropdown

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 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>