Angular Material Form (Mat-Error Validation and Mat-Datepicker)

Angular Material Form (Mat-Error Validation and Mat-Datepicker)

 Form fields with submit button:

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

3. Component - CSS

.full-width {
  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;
}