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;

}