Angular Reactive Form Example

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'
});
}
}
<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 }}

Leave a Reply

Your email address will not be published. Required fields are marked *