Angular 2 Angular 2 Forms Update Angular2 - Form Builder
Example
FormComponent.ts
import {Component} from "@angular/core";
import {FormBuilder} from "@angular/forms";
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.scss'],
providers : [FormBuilder]
})
export class FormComponent{
form : FormGroup;
emailRegex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
constructor(fb: FormBuilder) {
this.form = fb.group({
FirstName : new FormControl({value: null}, Validators.compose([Validators.required, Validators.maxLength(15)])),
LastName : new FormControl({value: null}, Validators.compose([Validators.required, Validators.maxLength(15)])),
Email : new FormControl({value: null}, Validators.compose([
Validators.required,
Validators.maxLength(15),
Validators.pattern(this.emailRegex)]))
});
}
}
form.component.html
<form class="form-details" role="form" [formGroup]="form">
<div class="row input-label">
<label class="form-label" for="FirstName">First name</label>
<input
[formControl]="form.controls['FirstName']"
type="text"
class="form-control"
id="FirstName"
name="FirstName">
</div>
<div class="row input-label">
<label class="form-label" for="LastName">Last name</label>
<input
[formControl]="form.controls['LastName']"
type="text"
class="form-control"
id="LastName"
name="LastName">
</div>
<div class="row">
<label class="form-label" for="Email">Email</label>
<input
[formControl]="form.controls['Email']"
type="email"
class="form-control"
id="Email"
name="Email">
</div>
<div class="row">
<button
(click)="submit()"
role="button"
class="btn btn-primary submit-btn"
type="button"
[disabled]="!form.valid">Submit</button>
</div>
</div>
</form>
