Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Angular Reactive Form
<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 }}
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'
});
}
}
@FoxGeoff

This comment has been minimized.

Copy link
Owner Author

FoxGeoff commented Feb 21, 2020

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

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.