_angular-model-driven-forms-basics.md

Code Examples for my Blog Post: An Introduction to Angular Reactive Forms

The full Github repo can be found here: github.com/kevinchisholm/video-code-examples/tree/master/angular/forms/model-driven-forms

Setup

• Clone this repo:

git clone git@github.com:kevinchisholm/video-code-examples.git

• Move into the project directory:

cd angular/forms/model-driven-forms

• Install Dependencies:

npm install

Local Web Server Instructions

Start the local web server:

npm start

Open the example web page:

http://localhost:3000/

console.dir-output-A.js

{
	"checkboxSignUp": true,
	"gender": "male",
	"firstname": "Don",
	"lastname": "Draper",
	"street": "123 E. Maple Drive",
	"zip": "10520",
	"city": "Ossining"
}

console.dir-output-B.js

{
	"checkboxSignUp": true,
	"gender": "male",
	"firstname": "Don",
	"lastname": "Draper",
	"address": {
		"street": "123 E. Maple Drive",
		"zip": "10520",
		"city": "Ossining"
	}
}

home-A-short.html

<form [formGroup]="registerForm">
    <div class="field checkbox">
        <label>Add me to your mailing list:</label>
        <input type="checkbox" formControlName="checkboxSignUp">
    </div>

    <div class="field radio">
        <input type="radio" value="male" formControlName="gender"><span>Male</span>
        <input type="radio" value="female" formControlName="gender"><span>Female</span>
    </div>
    <!-- REMAINING HTML OMITTED FOR BREVITY -->
</form>

home-A.html

<form [formGroup]="registerForm">
    <div class="field checkbox">
        <label>Add me to your mailing list:</label>
        <input type="checkbox" formControlName="checkboxSignUp">
    </div>

    <div class="field radio">
        <input type="radio" value="male" formControlName="gender"><span>Male</span>
        <input type="radio" value="female" formControlName="gender"><span>Female</span>
    </div>

    <div class="field">
        <label>First Name:</label>
        <input type="text" formControlName="firstname">
        <span
        class="errorText"
        *ngIf="registerForm.controls.firstname.errors">First Name required!</span>
    </div>

    <div class="field">
        <label>Last Name:</label>
        <input type="text" formControlName="lastname">
        <span
        class="errorText"
        *ngIf="registerForm.controls.lastname.errors">Last Name required!</span>
    </div>

    <fieldset>
      <div class="field">
          <label>Street:</label>
          <input type="text" formControlName="street">
      </div>

      <div class="field">
          <label>Zip:</label>
          <input type="text" formControlName="zip">
      </div>

      <div class="field">
          <label>City:</label>
          <input type="text" formControlName="city">
      </div>
    </fieldset>

    <div class="field">
        <button type="submit">Submit</button>
    </div>
</form>

home-B-short.html

<section class="page-content">
  <div class="form-container">
      <form [formGroup]="registerForm">
          <div class="field checkbox">
              <label>Add me to your mailing list:</label>
              <input type="checkbox" formControlName="checkboxSignUp">
          </div>

          <div class="field radio">
              <input type="radio" value="male" formControlName="gender"><span>Male</span>
              <input type="radio" value="female" formControlName="gender"><span>Female</span>
          </div>
          <!-- REMAINING HTML OMITTED FOR BREVITY -->
          <div class="field">
              <button type="submit">Submit</button>
          </div>
      </form>
  </div>
  <div class="form-data-container">
        <h2>Form Data</h2>
        <p class="key-val">
            <strong class="key">Checkbox: </strong>
            <span
            [ngClass]="{'bold-red': !formData.checkboxSignUp}"
            class="val">{{formData.checkboxSignUp || 'not checked'}}</span>
        </p>
        <p class="key-val">
            <strong class="key">Gender: </strong>
            <span
            [ngClass]="{'bold-red': !formData.gender}"
            class="val">{{formData.gender || 'no selection'}}</span>
        </p>
        <!-- REMAINING HTML OMITTED FOR BREVITY -->     
  </div>
</section>

home-B.html

<section class="page-content">
  <div class="form-container">
      <form [formGroup]="registerForm">
          <div class="field checkbox">
              <label>Add me to your mailing list:</label>
              <input type="checkbox" formControlName="checkboxSignUp">
          </div>

          <div class="field radio">
              <input type="radio" value="male" formControlName="gender"><span>Male</span>
              <input type="radio" value="female" formControlName="gender"><span>Female</span>
          </div>

          <div class="field">
              <label>First Name:</label>
              <input type="text" formControlName="firstname">
              <span
              class="errorText"
              *ngIf="registerForm.controls.firstname.errors">First Name required!</span>
          </div>

          <div class="field">
              <label>Last Name:</label>
              <input type="text" formControlName="lastname">
              <span
              class="errorText"
              *ngIf="registerForm.controls.lastname.errors">Last Name required!</span>
          </div>

          <fieldset formGroupName="address">
            <div class="field">
                <label>Street:</label>
                <input type="text" formControlName="street">
            </div>

            <div class="field">
                <label>Zip:</label>
                <input type="text" formControlName="zip">
            </div>

            <div class="field">
                <label>City:</label>
                <input type="text" formControlName="city">
            </div>
          </fieldset>

          <div class="field">
              <button type="submit">Submit</button>
          </div>
      </form>
  </div>
  <div class="form-data-container">
        <h2>Form Data</h2>
        <p class="key-val">
            <strong class="key">Checkbox: </strong>
            <span
            [ngClass]="{'bold-red': !formData.checkboxSignUp}"
            class="val">{{formData.checkboxSignUp || 'not checked'}}</span>
        </p>
        <p class="key-val">
            <strong class="key">Gender: </strong>
            <span
            [ngClass]="{'bold-red': !formData.gender}"
            class="val">{{formData.gender || 'no selection'}}</span>
        </p>
        <p class="key-val">
            <strong class="key">First Name: </strong>
            <span
            [ngClass]="{'error': registerForm.controls.firstname.errors}"
            class="val">{{formData.firstname || 'blank'}}</span>
        </p>
        <p class="key-val">
            <strong class="key">Last Name: </strong>
            <span
            [ngClass]="{'error': registerForm.controls.lastname.errors}"
            class="val">{{formData.lastname || 'blank'}}</span>
        </p>
        <p class="key-val">
            <strong class="key">Street: </strong>
            <span
            [ngClass]="{'bold-red': !formData.address.street}"
            class="val">{{formData.address.street || 'blank'}}</span>
        </p>
        <p class="key-val">
            <strong class="key">Zip: </strong>
            <span
            [ngClass]="{'bold-red': !formData.address.zip}"
            class="val">{{formData.address.zip || 'blank'}}</span>
        </p>
        <p class="key-val">
            <strong class="key">City: </strong>
            <span
            [ngClass]="{'bold-red': !formData.address.city}"
            class="val">{{formData.address.city || 'blank'}}</span>
        </p>     
  </div>
</section>

home.component-A.ts

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

@Component({
  selector: 'home',
  templateUrl: 'src/home/home.html',
  styleUrls:  ['src/home/home.css']
})
export class HomeComponent {
  registerForm: FormGroup;
  formData: any = {address: {}};

  ngOnInit() {
    this.registerForm = new FormGroup ({
      checkboxSignUp: new FormControl(),
      gender: new FormControl(),
      firstname: new FormControl(),
      lastname: new FormControl(),
      street: new FormControl(),
      zip: new FormControl(),
      city: new FormControl()
    });

    this.registerForm.valueChanges.subscribe((value: any) => {
      this.formData = value;

      console.warn('registerForm.valueChanges: value');
      console.dir(value);
    });
  }
}

home.component-B.ts

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

@Component({
  selector: 'home',
  templateUrl: 'src/home/home.html',
  styleUrls:  ['src/home/home.css']
})
export class HomeComponent {
    registerForm: FormGroup;
    formData: any = {address: {}};
    constructor(private formBuilder: FormBuilder) {}

    ngOnInit() {
        this.registerForm = this.formBuilder.group({
          checkboxSignUp: '',
          gender: '',
          firstname: ['', Validators.required],
          lastname: ['', Validators.required],
          address: this.formBuilder.group({
            street: [],
            zip: [],
            city: []
          })
        });
        
        this.registerForm.valueChanges.subscribe((value: any) => {
          this.formData = value;
        });
    }
}