Model Driven Forms

Model Driven Forms 

- Model Driven Forms also called as Reactive Forms.

- Model Driven Forms mainly on Model.

- [formGroup] is the predefined directive used to assign the logical name to form.

- formControlName is the predefined directive used to declare the form elements.

- formGroupName is the predefined directive used to create the "sub groups".

- Reactive forms available on "ReactiveFormsModule"

- "ReactiveFormsModule" available in "@angular/forms" package.


******************************************
MDFEx
src
    app
app.component.ts
app.conponent.html


app.module.ts
index.html
******************************************

app.component.ts

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

import { FormGroup,FormControl, Validators } from "@angular/forms";

@Component({

  selector: 'app-root',

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

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

})

export class AppComponent {

  private myForm:FormGroup;

  ngOnInit(){

    this.myForm = new FormGroup({

        fname:new FormControl("Naresh",[Validators.required,

                                        Validators.minLength(3),

                                        Validators.maxLength(6)]),

        lname:new FormControl(),

        uemail:new FormControl(),

        addr:new FormGroup({

          ucity:new FormControl(),

          uaddress:new FormControl()

        }),

        gender:new FormControl(),

        ucountry:new FormControl()

    });

  }

  public clickMe():any{

      console.log(this.myForm.value);

  }

}

app.component.html

<div class="container">

  <form [formGroup]="myForm" (ngSubmit)="clickMe()">

     

      <!--First Name-->

      <div class="form-group">

        <label>First Name.</label>

        <input type="text"

               class="form-control"

               formControlName="fname"

               required>

      </div>

      <div class="alert alert-danger"

          *ngIf="myForm.controls['fname'].hasError('required')">

          *** Can't Left Blank *** 

      </div>

      <div class="alert alert-warning"

           *ngIf="myForm.controls['fname'].hasError('minlength')">

            *** Minimum 3 characters are required ***

      </div>

      <div class= "alert alert-success"

           *ngIf="myForm.controls['fname'].hasError('maxlength')">

          *** maximum 6 Chatacters Are Allowed ***

      </div>

 

      <!--Last Name-->

      <div class="form-group">

          <label>Last Name.</label>

          <input type="text"

                 class="form-control"

                 formControlName="lname">

      </div>

      <!--Email-->

      <div class="form-group">

          <label>Email.</label>

          <input type="email"

                 class="form-control"

                 formControlName="uemail">

      </div>

 

      <!-- Sub Group-->

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

          <!--City-->

          <div class="form-group">

            <label>City.</label>

            <input type="text"

                   class="form-control"

                   formControlName="ucity">

          </div>

           <!--Address-->

           <div class="form-group">

              <label>Address.</label>

              <input type="text"

                     class="form-control"

                     formControlName="uaddress">

           </div>

      </div>

      <!--Gender-->

      <div class="form-group">

          <input type="radio"

                 class="form-control"

                 value="male"

                 formControlName="gender">Male

          <input type="radio"

                 class="form-control"

                 value="female"

                 formControlName="gender">FeMale      

      </div>

      <!-- DropDown -->

      <div class="form-group">

          <select class="form-control" formControlName="ucountry">

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

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

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

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

          </select>

      </div>

      <!-- Submit Button -->

      <div align="center" style="margin-top: 20px">

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

      </div>

  </form>

</div>

app.module.ts

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

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

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

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

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule, ReactiveFormsModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }