mryenagandula / angular-material-forms-and-form-array

This project describe about form array and how to add remove from sign up form.

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-and-form-array"

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

• 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