Angular Material Form (Mat-Error Validation and Mat-Datepicker)
Form validation (on submit):
Material Datepicker:
1. Component - HTML
<div class="user-form">
<form role="form" (ngSubmit)="submit()" [formGroup]="userForm" autocomplete="off">
<h1 class="description" fxLayoutAlign="space-evenly center">
Please fill all below fields
</h1>
<br/>
<div>
<mat-form-field hideRequiredMarker class="full-width">
<mat-label class="form-label">Request UID</mat-label>
<input class="field-value" readonly matInput name="uid" id="uid" type="text"
value="{{uid}}">
</mat-form-field>
<br/><br/>
<mat-form-field hideRequiredMarker class="full-width">
<mat-label class="form-label">Name</mat-label>
<input class="field-value" matInput name="name" id="name" formControlName="name" type="text">
<mat-error *ngIf="userForm.get('name')?.errors">Please enter your full name
</mat-error>
</mat-form-field>
<br><br/>
<mat-form-field hideRequiredMarker class="full-width">
<mat-label class="form-label">Street</mat-label>
<input class="field-value" matInput name="street" id="street" formControlName="street" type="text">
<mat-error *ngIf="userForm.get('street')?.errors">Please enter your street
address
</mat-error>
</mat-form-field>
<br><br/>
<mat-form-field hideRequiredMarker class="full-width">
<mat-label class="form-label">Post code</mat-label>
<input class="field-value" matInput name="postcode" id="postcode" formControlName="postcode" type="text">
<mat-error *ngIf="userForm.get('postcode')?.errors">Please enter your postal
code
</mat-error>
</mat-form-field>
<br><br/>
<mat-form-field hideRequiredMarker class="full-width">
<mat-label class="form-label">City</mat-label>
<input class="field-value" matInput name="city" id="city" formControlName="city" type="text">
<mat-error *ngIf="userForm.get('city')?.errors">Please enter your city
</mat-error>
</mat-form-field>
<br><br/>
<mat-form-field hideRequiredMarker class="full-width">
<mat-label class="form-label">Birth Date</mat-label>
<input class="field-value" readonly matInput [matDatepicker]="datepicker" [formControl]="userBirthDate" name="birthdate"
id="birthdate" formControlName="birthdate"
placeholder="{{'oneapp.components.contractTermination.birthdate' | translate}}">
<mat-datepicker-toggle matSuffix [for]="datepicker"></mat-datepicker-toggle>
<mat-datepicker touchUi #datepicker></mat-datepicker>
<mat-error *ngIf="userForm.get('birthdate')?.errors">Please enter your
birthdate
</mat-error>
</mat-form-field>
<br>
</div>
<br>
<div>
<button mat-button>Submit</button>
</div>
</form>
</div>
2. Component - TS
import {Component} from '@angular/core';
import {FormBuilder, FormControl, Validators} from '@angular/forms';
import {register} from 'app/oneapp/shared/util/component-mapping';
import {IUserFormRequest} from 'app/oneapp/shared/model/contract-termination.model';
@Component({
selector: 'jhi-user-form',
templateUrl: './user-form.component.html',
styleUrls: ['./user-form.component.scss']
})
@register
export class UserFormComponent {
uid = 'AAd566HIi0009001';
userName = 'John Doe';
userStreet = 'Main str. 12';
userPostCode = '54351';
userCity = 'Washington';
userBirthDate = new FormControl(new Date());
userForm = this.fb.group({
name: ['', [Validators.required]],
street: ['', Validators.required],
postcode: ['', Validators.required],
city: ['', Validators.required],
birthdate: ['', Validators.required]
});
constructor(
private fb: FormBuilder
) {
this.userForm.get('name')!.setValue(this.userName);
this.userForm.get('street')!.setValue(this.userStreet);
this.userForm.get('postcode')!.setValue(this.userPostCode);
this.userForm.get('city')!.setValue(this.userCity);
this.userForm.get('birthdate')!.setValue(this.userBirthDate);
}
submit(): void {
// Perform birthdate field validation before submitting
this.userForm.controls['birthdate'].updateValueAndValidity();
if (!this.userForm.invalid) {
const fullRequest: IUserFormRequest = this.constructRequest();
}
}
/**
* Prepare the request object
*
*/
private constructRequest(): IUserFormRequest {
const request: IUserFormRequest = {
uid: this.uid,
user: this.userForm.value
};
return request;
}
}
import {FormBuilder, FormControl, Validators} from '@angular/forms';
import {register} from 'app/oneapp/shared/util/component-mapping';
import {IUserFormRequest} from 'app/oneapp/shared/model/contract-termination.model';
@Component({
selector: 'jhi-user-form',
templateUrl: './user-form.component.html',
styleUrls: ['./user-form.component.scss']
})
@register
export class UserFormComponent {
uid = 'AAd566HIi0009001';
userName = 'John Doe';
userStreet = 'Main str. 12';
userPostCode = '54351';
userCity = 'Washington';
userBirthDate = new FormControl(new Date());
userForm = this.fb.group({
name: ['', [Validators.required]],
street: ['', Validators.required],
postcode: ['', Validators.required],
city: ['', Validators.required],
birthdate: ['', Validators.required]
});
constructor(
private fb: FormBuilder
) {
this.userForm.get('name')!.setValue(this.userName);
this.userForm.get('street')!.setValue(this.userStreet);
this.userForm.get('postcode')!.setValue(this.userPostCode);
this.userForm.get('city')!.setValue(this.userCity);
this.userForm.get('birthdate')!.setValue(this.userBirthDate);
}
submit(): void {
// Perform birthdate field validation before submitting
this.userForm.controls['birthdate'].updateValueAndValidity();
if (!this.userForm.invalid) {
const fullRequest: IUserFormRequest = this.constructRequest();
}
}
/**
* Prepare the request object
*
*/
private constructRequest(): IUserFormRequest {
const request: IUserFormRequest = {
uid: this.uid,
user: this.userForm.value
};
return request;
}
}
3. Component - CSS
width: 100%;
}
.user-form {
height: 100%;
padding: 2.7vw;
}
mat-form-field.mat-form-field {
font-size: 2.08vh;
line-height: 2.6vh;
}
.mat-button {
border-radius: 30px;
font-size: 2.08vh;
background-color: #ea485d;
color: white;
width: 100%;
}
.description {
font-weight: 100;
font-size: 2.1vh;
}
.field-label {
color: lightgray;
font-size: 1.5vh;
margin-bottom: 0.3vh;
}
.form-label {
color: lightgray;
font-size: 2.3vh;
font-weight: 500;
margin-bottom: 1.3vh;
}
.field-value {
font-weight: 500;
font-size: 2.1vh;
}
