TDS - Form

 Forms in Angular 2, 4, 5 & 6

- In angular, we can design the forms.

- In Angular, we can design the forms in 2 ways.

1) TDF (Template Driven Forms)

2) MDF (Model Driven Forms) (MDF) (Reactive Forms)

- Template Driven Forms Mainly Based on View.

- Model Driven Forms mainly based on "Model Data".

- Angular By default apply the following validations on Forms.

1) dirty   ==> pristine   (when ever change detected)

2) touched ==> untouched  (when ever we touch the fields)

3) valid  ==> invalid    (when ever  we ignore the required rule

app.component.html

 

<div class="container">

   

  <form #profileData="ngForm" (ngSubmit)="register(profileData.value)">

        <!--First Name-->

        <div class="form-group">

          <label>First Name.</label>

          <input type="text"

                 ngModel="fname"

                 class="form-control"

                 ngModel

                 #fname="ngModel"

                 required

                 >

        </div>

        <div [hidden]="fname1.valid" class="alert alert-danger">

            **** Can't Left Blank ****

        </div>

        <!--Last Name-->

        <div class="form-group">

            <label>Last Name.</label>

            <input type="text"

                   name="lname"

                   class="form-control"

                   ngModel>

        </div>

        <!--Email-->

        <div class="form-group">

            <label>Email.</label>

            <input type="email"

                   name="uemail"

                   class="form-control"

                   ngModel>

        </div>

        <!-- Sub Group-->

        <div class="form-group" ngModelGroup="addr">

            <!-- City -->

            <div class="form-group">

              <label>City</label>

              <input type="text"

                     name="ucity"

                     class="form-control"

                     ngModel>

            </div>

            <!-- Address -->

            <div class="form-group">

                <label>Address Lane.</label>

                <input type="text"

                       class="form-control"

                       name="uaddress"

                       ngModel>

            </div>

        </div>

        <!-- Gender -->

        <div class="form-group">

          <label>Gender.</label>

          <input type="radio"

                 name="sex"

                 class="form-control"

                 ngModel

                 value="male">Male

          <input type="radio"

                 name="sex"

                 class="form-control"

                 ngModel

                 value="female">FeMale

        </div>

        <!-- Dropdown -->

        <div class="form-group">

            <label>Country.</label>

            <select class="form-control" name="ucountry" ngModel>

                <option value="india">India</option>

                <option value="usa">USA</option>

                <option value="canada">Canada</option>

                <option value="UK">UK</option>

            </select>

        </div>

        <!-- Submit Button -->

        <div class="form-group" align="center" style="margin-top: 10px">

            <input type="submit" class="btn btn-success">

        </div>

    </form>

</div>

app.component.ts

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'app';

  fname1 = "Chaitu";

  public register(data){

    console.log(data);

  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { FormsModule } from "@angular/forms";

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    FormsModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }