Login Form Using Reactive Forms:
App.component.html
<div class="container">
<form [formGroup]="formloginGroup" (ngSubmit)="onSubmit(formGroup.value)" class="form">
<mat-form-field floatLabel="never" class="form-element">
<input type="text" matInput placeholder="Username" formControlName="username">
<mat-error *ngIf="formGroup.controls['username'].invalid">
{{getError('user')}}
</mat-error>
</mat-form-field>
<mat-form-field floatLabel="never" class="form-element">
<input type="password" matInput placeholder="Password" formControlName="password">
<mat-error *ngIf="!formGroup.controls['password'].valid">
{{getError('pass')}}
</mat-error>
</mat-form-field>
<div class="form-element">
<button mat-raised-button color="primary" type="submit" class="button"
[disabled]="!formGroup.valid">Submit Form</button>
</div>
</form>
</div>
app.component.ts
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
formGroup: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.createForm();
}
createForm() {
this.formloginGroup = this.formBuilder.group({
'username': ['', Validators.required],
'password': ['', Validators.required],
});
}
getError(el) {
switch (el) {
case 'user':
if (this.formloginGroup.get('username').hasError('required')) {
return 'Username required';
}
break;
case 'pass':
if (this.formloginGroup.get('password').hasError('required')) {
return 'Password required';
}
break;
default:
return '';
}
}
onSubmit(post) {
// this.post = post;
}
}
app.component.css
.container {
padding: 10px;
}
.form {
min-width: 150px;
max-width: 500px;
width: 100%;
}
.form-element {
padding: 5px 0px 25px 2px;
width: 100%;
}
.button {
width: 100%;
}
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from './material.module';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
ReactiveFormsModule,
MaterialModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Register Form:
register.component.html
<div class="register-form">
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="form-group">
<label>Full Name</label>
<input
type="text"
formControlName="fullname"
class="form-control"
[ngClass]="{ 'is-invalid': submitted && f.fullname.errors }"
/>
<div *ngIf="submitted && f.fullname.errors" class="invalid-feedback">
<div *ngIf="f.fullname.errors.required">Fullname is required</div>
</div>
</div>
<div class="form-group">
<label>Username</label>
<input
type="text"
formControlName="username"
class="form-control"
[ngClass]="{ 'is-invalid': submitted && f.username.errors }"
/>
<div *ngIf="submitted && f.username.errors" class="invalid-feedback">
<div *ngIf="f.username.errors.required">Username is required</div>
<div *ngIf="f.username.errors.minlength">
Username must be at least 6 characters
</div>
<div *ngIf="f.username.errors.maxlength">
Username must not exceed 20 characters
</div>
</div>
</div>
<div class="form-group">
<label>Email</label>
<input
type="text"
formControlName="email"
class="form-control"
[ngClass]="{ 'is-invalid': submitted && f.email.errors }"
/>
<div *ngIf="submitted && f.email.errors" class="invalid-feedback">
<div *ngIf="f.email.errors.required">Email is required</div>
<div *ngIf="f.email.errors.email">Email is invalid</div>
</div>
</div>
<div class="form-group">
<label>Password</label>
<input
type="password"
formControlName="password"
class="form-control"
[ngClass]="{ 'is-invalid': submitted && f.password.errors }"
/>
<div *ngIf="submitted && f.password.errors" class="invalid-feedback">
<div *ngIf="f.password.errors.required">Password is required</div>
<div *ngIf="f.password.errors.minlength">
Password must be at least 6 characters
</div>
<div *ngIf="f.password.errors.maxlength">
Username must not exceed 40 characters
</div>
</div>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input
type="password"
formControlName="confirmPassword"
class="form-control"
[ngClass]="{ 'is-invalid': submitted && f.confirmPassword.errors }"
/>
<div
*ngIf="submitted && f.confirmPassword.errors"
class="invalid-feedback"
>
<div *ngIf="f.confirmPassword.errors.required">
Confirm Password is required
</div>
<div *ngIf="f.confirmPassword.errors.matching">
Confirm Password does not match
</div>
</div>
</div>
<div class="form-group form-check">
<input
type="checkbox"
formControlName="acceptTerms"
class="form-check-input"
[ngClass]="{ 'is-invalid': submitted && f.acceptTerms.errors }"
/>
<label for="acceptTerms" class="form-check-label"
>I have read and agree to the Terms</label
>
<div *ngIf="submitted && f.acceptTerms.errors" class="invalid-feedback">
Accept Terms is required
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Register</button>
<button
type="button"
(click)="onReset()"
class="btn btn-warning float-right"
>
Reset
</button>
</div>
</form>
</div>
register.component.ts
import { Component, OnInit } from '@angular/core';
import {
AbstractControl,
FormBuilder,
FormGroup,
Validators
} from '@angular/forms';
import Validation from './utils/validation';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
form: FormGroup;
submitted = false;
constructor(private formBuilder: FormBuilder) {}
ngOnInit(): void {
this.form = this.formBuilder.group(
{
fullname: ['', Validators.required],
username: [
'',
[
Validators.required,
Validators.minLength(6),
Validators.maxLength(20)
]
],
email: ['', [Validators.required, Validators.email]],
password: [
'',
[
Validators.required,
Validators.minLength(6),
Validators.maxLength(40)
]
],
confirmPassword: ['', Validators.required],
acceptTerms: [false, Validators.requiredTrue]
},
{
validators: [Validation.match('password', 'confirmPassword')]
}
);
}
get f(): { [key: string]: AbstractControl } {
return this.form.controls;
}
onSubmit(): void {
this.submitted = true;
if (this.form.invalid) {
return;
}
console.log(JSON.stringify(this.form.value, null, 2));
}
onReset(): void {
this.submitted = false;
this.form.reset();
}
}
