Angular Material Forms

This project was generated with Angular CLI version 9.0.0.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

How to implement form array in angular

Steps:

• Create angular project with below command. "ng new angular-material-forms-username-availability"

• After successfully creation of angular app, change file directory to project-name. "cd angular-material-forms-username-availability"

• Open project in vs code using "code ."

• Then run the project using "ng serve".

• Open project in chrome using localhost:4200

• Open app component in vs code and remove the content which is created by angular cli while creating the app.

• Adding angular material using the command ng add @angular/material

• Select theme , Am selecting Indigo/Pink

• Set up global Angular Material typography styles? Am selecting as y

• Set up browser animations for Angular Material? (Y/n) Select 'y'.

• Created Shared Module in the libs folder.And import , export material modules.

• Create Signup component in the apps/component folder.

• Add signup compopent in router and path as signup.

• Add ReactiveFormsModule, FormsModule in app.module.ts

• Open signup.component.ts , then add formbuilder as dependency in constuctor.

• Create form variable above the constructor.

• Create formInit method to intialize the form and call the method form either contructor or ngOninit.

• And create form group using form builder and add controls in that same form.

• Form Controls like firstName, secondName , email, username, password and mobile.

• Add The below html in signup.component.html.

  <div class="container">
    <form class="form shadow m-3 p-3" [formGroup]="form" (ngSubmit)="submitForm()">
        <h1>Sign Up Form</h1>
    </form>
</div>

  <div class="container">
    <form class="form shadow m-3 p-3" [formGroup]="form" (ngSubmit)="submitForm()">
        <h1>Sign Up Form</h1>
        <div class="row mt-3">
            <mat-form-field class="col-md-6">
                <mat-label>First Name</mat-label>
                <input matInput formControlName="firstName" placeholder="Enter First Name">
            </mat-form-field>
        </div>
    </form>
</div>

<div class="container">
    <form class="form shadow m-3 p-3" [formGroup]="form" (ngSubmit)="submitForm()">
        <h1>Sign Up Form</h1>
        <div class="row mt-3">
            <mat-form-field class="col-md-6">
                <mat-label>First Name</mat-label>
                <input matInput formControlName="firstName" placeholder="Enter First Name">
                <mat-error *ngIf="this.form.controls.firstName.hasError('required')">
                  First Name is <strong>required</strong>
                </mat-error>
            </mat-form-field>
        </div>
    </form>
</div>

<div class="container">
    <form class="form shadow m-3 p-3" [formGroup]="form" (ngSubmit)="submitForm()">
        <h1>Sign Up Form</h1>
        <div class="row mt-3">
            <mat-form-field class="col-md-6">
                <mat-label>First Name</mat-label>
                <input matInput formControlName="firstName" placeholder="Enter First Name">
                <mat-error *ngIf="this.form.controls.firstName.hasError('required')">
                  First Name is <strong>required</strong>
                </mat-error>
            </mat-form-field>
        </div>
        <div class="row mt-3">
            <mat-form-field class="col-md-6">
                <mat-label>Last Name</mat-label>
                <input matInput formControlName="lastName" placeholder="Enter Last Name">
                <mat-error *ngIf="this.form.controls.lastName.hasError('required')">
                  Last Name is <strong>required</strong>
                </mat-error>
            </mat-form-field>
        </div>
        <div class="row mt-3">
            <mat-form-field class="col-md-6">
                <mat-label>User Name</mat-label>
                <input matInput formControlName="username" placeholder="Enter Username">
                <mat-error *ngIf="this.form.controls.username.hasError('required')">
                  Username is <strong>required</strong>
                </mat-error>
            </mat-form-field>
        </div>
        <div class="row mt-3">
            <mat-form-field class="col-md-6">
                <mat-label>Email</mat-label>
                <input matInput formControlName="email" placeholder="Enter Email">
                <mat-error *ngIf="this.form.controls.email.hasError('required')">
                  Email <strong>required</strong>
                </mat-error>
            </mat-form-field>
        </div>
        <div class="row mt-3">
            <mat-form-field class="col-md-6">
                <mat-label>Password</mat-label>
                <input type="password" matInput formControlName="password" placeholder="Enter Password">
                <mat-error *ngIf="this.form.controls.password.hasError('required')">
                  Password is <strong>required</strong>
                </mat-error>
            </mat-form-field>
        </div>
        <div class="row mt-3">
            <button type="submit" mat-raised-button color="primary" class="m-2" style="width: 100px;" [disabled]="!form.valid">Submit Form</button>
            <button type="button" mat-raised-button color="warn" class="m-2" style="width: 100px;" (click)="form.reset()">Reset</button>
        </div>
    </form>
</div>

OUTPUT