Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

Angular Logo

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/
{
"checkboxSignUp": true,
"gender": "male",
"firstname": "Don",
"lastname": "Draper",
"street": "123 E. Maple Drive",
"zip": "10520",
"city": "Ossining"
}
{
"checkboxSignUp": true,
"gender": "male",
"firstname": "Don",
"lastname": "Draper",
"address": {
"street": "123 E. Maple Drive",
"zip": "10520",
"city": "Ossining"
}
}
<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>
<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>
<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>
<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>
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);
});
}
}
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;
});
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.