Angular Reactive Form

customer.component.html

<div class="card">
  <div class="card-header">
    Sign Up!
  </div>

  <div class="card-body">
    <form novalidate
      (ngSubmit)="save()"
      [formGroup]="customerForm">

      <div class="form-group row mb-2">
        <label class="col-md-2 col-form-label" for="firstNameId"
          >First Name</label
        >
        <div class="col-md-8">
          <input
            class="form-control"
            id="firstNameId"
            type="text"
            placeholder="First Name (required)"
            required
            minlength="3"
            formControlName="firstName"
            name="firstName"
            [ngClass]="{
              'is-invalid':
                (customerForm.get('firstName').touched || customerForm.get('firstName').dirty) &&
                !customerForm.get('firstName').valid
            }"
          />
          <span class="invalid-feedback">
            <span *ngIf="customerForm.get('firstName').errors?.required">
              Please enter your first name.
            </span>
            <span *ngIf="customerForm.get('firstName').errors?.minlength">
              The first name must be longer than 3 characters.
            </span>
          </span>
        </div>
      </div>

      <div class="form-group row mb-2">
        <label class="col-md-2 col-form-label" for="lastNameId"
          >Last Name</label
        >
        <div class="col-md-8">
          <input
            class="form-control"
            id="lastNameId"
            formControlName="lastName"
            type="text"
            placeholder="Last Name (required)"
            required
            maxlength="50"
            [ngClass]="{
              'is-invalid':
                (customerForm.get('lastName').touched || customerForm.get('lastName').dirty) && !customerForm.get('lastName').valid
            }"
          />
          <span class="invalid-feedback">
            <span *ngIf="customerForm.get('lastName').errors?.required">
              Please enter your last name.
            </span>
            <span *ngIf="customerForm.get('lastName').errors?.maxlength">
              The last name must be less than 50 characters.
            </span>
          </span>
        </div>
      </div>

      <div class="form-group row mb-2">
        <label class="col-md-2 col-form-label" for="emailId">Email</label>
        <div class="col-md-8">
          <input
            class="form-control"
            id="emailId"
            formControlName="email"

            type="email"
            placeholder="Email (required)"
            required
            email
            name="email"
            [ngClass]="{
              'is-invalid':
                (customerForm.get('email').touched || customerForm.get('email').dirty) && !customerForm.get('email').valid
            }"
          />
          <span class="invalid-feedback">
            <span *ngIf="customerForm.get('email').errors?.required">
              Please enter your email address.
            </span>
            <span *ngIf="customerForm.get('email').errors?.email">
              Please enter a valid email address.
            </span>
          </span>
        </div>
      </div>

      <div class="form-group row mb-2">
        <div class="col-md-8">
          <div class="form-check">
            <label class="form-check-label">
              <input
                class="form-check-input"
                id="sendCatalogId"
                type="checkbox"
                name="sendCatalog"
              />
              Send me your catalog
            </label>
          </div>
        </div>
      </div>

      <div *ngIf="customer.sendCatalog">
        <div class="form-group row mb-2">
          <label class="col-md-2 col-form-label pt-0">Address Type</label>
          <div class="col-md-8">
            <div class="form-check form-check-inline">
              <label class="form-check-label">
                <input
                  class="form-check-input"
                  id="addressType1Id"
                  type="radio"
                  value="home"
                  name="addressType"
                />
                Home
              </label>
            </div>
            <div class="form-check form-check-inline">
              <label class="form-check-label">
                <input
                  class="form-check-input"
                  id="addressType1Id"
                  type="radio"
                  value="work"
                  name="addressType"
                />
                Work
              </label>
            </div>
            <div class="form-check form-check-inline">
              <label class="form-check-label">
                <input
                  class="form-check-input"
                  id="addressType1Id"
                  type="radio"
                  value="other"
                  name="addressType"
                />
                Other
              </label>
            </div>
          </div>
        </div>

        <div class="form-group row mb-2">
          <label class="col-md-2 col-form-label" for="street1Id"
            >Street Address 1</label
          >
          <div class="col-md-8">
            <input
              class="form-control"
              id="street1Id"
              type="text"
              placeholder="Street address"
              name="street1"
            />
          </div>
        </div>

        <div class="form-group row mb-2">
          <label class="col-md-2 col-form-label" for="street2Id"
            >Street Address 2</label
          >
          <div class="col-md-8">
            <input
              class="form-control"
              id="street2Id"
              type="text"
              placeholder="Street address (second line)"
              name="street2"
            />
          </div>
        </div>

        <div class="form-group row mb-2">
          <label class="col-md-2 col-form-label" for="cityId"
            >City, State, Zip Code</label
          >
          <div class="col-md-3">
            <input
              class="form-control"
              id="cityId"
              type="text"
              placeholder="City"
              name="city"
            />
          </div>
          <div class="col-md-3">
            <select
              class="form-control"
              id="stateId"
              name="state"
            >
              <option value="" disabled selected hidden
                >Select a State...</option
              >
              <option value="AL">Alabama</option>
              <option value="AK">Alaska</option>
              <option value="AZ">Arizona</option>
              <option value="AR">Arkansas</option>
              <option value="CA">California</option>
              <option value="CO">Colorado</option>
              <option value="WI">Wisconsin</option>
              <option value="WY">Wyoming</option>
            </select>
          </div>
          <div class="col-md-2">
            <input
              class="form-control"
              id="zipId"
              type="number"
              placeholder="Zip Code"
              name="zip"
            />
          </div>
        </div>
      </div>

      <div class="form-group row mb-2">
        <div class="offset-md-2 col-md-4">
          <button
            class="btn btn-primary mr-3"
            type="submit"
            style="width:80px"
            [title]="
            customerForm.valid
                ? 'Save your entered data'
                : 'Disabled until the form data is valid'
            "
            [disabled]="!customerForm.valid"
          >
            Save
          </button>
          <button class="btn btn-warning" (click)="testData()">Test Data</button>
        </div>
      </div>
    </form>
  </div>
</div>
<br />Dirty: {{ customerForm.dirty }} <br />Touched: {{ customerForm.touched }}
<br />Valid: {{ customerForm.valid }} <br />Value: {{ customerForm.value | json }}

customer.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

import { Customer } from './customer';

@Component({
  selector: 'app-customer',
  templateUrl: './customer.component.html',
  styleUrls: ['./customer.component.css']
})
export class CustomerComponent implements OnInit {
  customerForm: FormGroup;
  customer = new Customer();

  constructor() { }

  /* This can be replaced by using: this.customForm = new FormGroup({ firstName: '', lastName: '', ...
  OR ... email: {value: 'n/a', disabled: tue}}) */
  ngOnInit() {
    this.customerForm = new FormGroup({
      firstName: new FormControl(),
      lastName: new FormControl(),
      email: new FormControl(),
      sendCatalog: new FormControl(true)
    });
  }

  save() {
    console.log(this.customerForm);
    console.log('Saved: ' + JSON.stringify(this.customerForm.value));
  }

  /* use setValue to change every value */
  testData() {
    this.customerForm.patchValue({
      firstName: 'Geoff'
    });
  }
}

Angular Reactive Form using FormGroup() and FormControl(). Updates using patchValue and setValue