Cacher is the code snippet organizer for pro developers

<div class="row">
  <!-- in 'submit(f)', 'f' is a reference to the ngForm directive -->
  <form #f="ngForm" (ngSubmit)="submit(f)" class="col s12 card grey lighten-3" novalidate>

    <div ngModelGroup="contact" #contact="ngModelGroup">
      <!-- 
        Message for when contact form is not valid
        <div *ngIf="!contact.valid">Form not valid!</div> 
      -->
      <div class="row">
        <div class="input-field col s12">
          <input
            ngModel
            name="firstName"
            #firstName="ngModel"
            (change)="log(firstName)"
            id="firstName"
            type="text"
            minlength="3"
            maxlength="10"
            pattern="banana"
            required />
          <label for="firstName">First Name</label>
          <div *ngIf="firstName.touched && !firstName.valid">
            <small *ngIf="firstName.errors.required" class="red-text">First name is required.</small>
            <small *ngIf="firstName.errors.minlength" class="red-text">
              First name should be minimum of {{ firstName.errors.minlength.requiredLength }} characters.
            </small>
            <small *ngIf="firstName.errors.pattern" class="red-text">First name doesn't match the pattern.</small>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="input-field col s12">
        <textarea
          ngModel
          name="comment"
          #comment="ngModel"
          id="comment"
          class="materialize-textarea">
        </textarea>
        <label for="comment">Comment</label>
      </div>
    </div>

    <div class="row">
      <div class="input-field col s12">
        <input
          type="checkbox"
          id="subscribe"
          ngModel
          name="isSubscribed" />
        <label for="subscribe">Subscribe to mailing list</label>
      </div>
    </div>

    <div class="row">
      <div class="col s12">
        <label for="contactMethod">Contact Method</label>
        <!-- Use 'multiple' within <select> to allow multiple selections at a time -->
        <select
          ngModel
          name="contactMethod"
          id="contactMethod"
          class="browser-default">
          <option value="" disabled selected>Choose your option</option>
          <option *ngFor="let method of contactMethods" [value]="method.id">{{ method.name }}</option>
        </select>
      </div>
    </div>

    <div class="row">
      <div *ngFor="let method of contactMethods" class="col s12">
        <input ngModel name="contactMethod" type="radio" id="contactMethod{{method.id}}" [value]="method.id" />
        <label for="contactMethod{{method.id}}">{{ method.name }}</label>
      </div>
    </div>

    <div class="row">
      <div class="input-field col s12">
        <button
          class="btn"
          [disabled]="!f.valid"> <!-- Disabled button if form is not valid -->
          Submit
        </button>
      </div>
    </div>


  </form>
</div>

{{ f.value | json }}

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


@Component({
  selector: 'app-contact-form',
  templateUrl: './contact-form.component.html',
  styleUrls: ['./contact-form.component.css']
})
export class ContactFormComponent {

    firstName = '';
    comment = '';

    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); // get firstName value from form
      f.resetForm(); // resets form values
    }

}

input.ng-touched.ng-invalid {
  border-color: red;
  box-shadow: 0 1px 0 0 red;
}

...
import { FormsModule } from '@angular/forms'; // <!-- imports NgModel
...

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    FormsModule
  ]
  ...
  ...
})
...