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

Angular Material Form with MatIput, MatSelect, MatRadioGroup, MatRadioButton and Angular Flex Layout

Angular Material Form with MatIput, MatSelect, MatRadioGroup, MatRadioButton and Angular Flex Layout

Prerequisites:

bootstrap v4.3.1

@angular/material v8.2.3

@angular/flex-layout": "^8.0.0-beta.27

1. Component - HTML

<div class="create-exercise-page" fxLayout="column" fxLayoutAlign="start center">
    <br/> <br/>
    <form role="form" (ngSubmit)="submitForm()" [formGroup]="createActivityForm" autocomplete="off">
        <div fxLayout="column" fxLayoutAlign="space-around center">
            <div style="text-align: center">
                <mat-radio-group ngDefaultControl style="width: 600px;text-align: center"
                                 formControlName="selectedActivityType">
                    <mat-radio-button *ngFor="let a of activityTypes" [value]="a.id">
                        {{a.label}}
                    </mat-radio-button>
                </mat-radio-group>
            </div>

            <!--    ACTIVITY NAME -->
            <br/>
            <div>
                <mat-form-field>
                    <input formControlName="actNameInput" name="actNameInput" [type]="'text'" matInput
                           placeholder="Enter name...">
                </mat-form-field>
            </div>
            <br/>
            <br/>
            <!--    SUBTYPE CHOICE-->
            <div style="height: 180px; width: 800px;" fxLayout="row" fxLayoutAlign="center start">
                <div>
                    <br/>
                    <div style="text-align: center">
                        <mat-form-field>
                            <mat-select name="selectedActSubType" placeholder="Choose subType..."
                                        formControlName="selectedActSubType" matSelect>
                                <mat-option *ngFor="let subType of subTypes"
                                            [value]="subType">{{subType}}</mat-option>
                            </mat-select>
                        </mat-form-field>
                    </div>
                </div>
            </div>

            <!--    SUBMIT BUTTON-->
            <br/> <br/>
            <br/>
            <div style="text-align: center">
                <button style="width:200px;height:40px;" type="submit" class="btn btn-primary">
                    <span>Submit</span>
                </button>
            </div>
            <br/>
            <br/>
        </div>
    </form>

</div>

2. Component - TS

import {Component, OnInit} from '@angular/core';

import {FormBuilder} from '@angular/forms';

import {MatFormFieldControl} from '@angular/material/form-field';

interface IActivityType {

  id: number;

  label: string;

}

@Component({

  selector: 'jhi-create-activity',

  templateUrl: './create-activity.component.html',

  styleUrls: ['./create-activity.component.scss'],

  providers: [

    {provide: MatFormFieldControl, useExisting: CreateActivityComponent}

  ]

})

export class CreateActivityComponent implements OnInit {

  createActivityForm = this.fb.group({

    selectedActivityType: [''],

    actNameInput: [''],

    selectedActSubType: [''],

    newSubtype: ['']

  });

  subTypes: String[] = ['BASKET', 'SOCCER', 'TENNIS'];

  activityTypes: IActivityType[] = [{id: 1, label: 'HIKING'}, {id: 2, label: 'SPORTS'}, {id: 3, label: 'SWIMMING'}];

  constructor(private fb: FormBuilder) {}

  ngOnInit() {}

  submitForm(): void {

    const selectedActivityTypeId = this.createActivityForm.get(['selectedActivityType'])!.value;

    const actNameInput = this.createActivityForm.get(['actNameInput'])!.value;

    const selectedActSubType = this.createActivityForm.get(['selectedActSubType'])!.value;

    const newSubtype = this.createActivityForm.get(['newSubtype'])!.value;

    this.yourService.createNewActivity(selectedActivityTypeId, actNameInput, selectedActSubType, newSubtype).subscribe(

      () => (console.log('New Activity Created..')),

      () => (console.log('Error in creating new activity..'))

    );

  }

}

3. Component - CSS

.create-exercise-page {

  height: 1100px;

  width: 500px;

}

.mat-radio-button ~ .mat-radio-button {

  margin-left: 50px;

}

p {

  font-family: Lato;

}