Angular 7 Lesson 7 - How to use template driven form in Angular

How to use template driven form in Angular

Video link:

Full tutorial link;
https://blog.myzingonline.com/p/angular-7.html

Step 1: Add FormsModule  reference to app.module.ts

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

 imports: [

    BrowserModule,

    AppRoutingModule,

    FormsModule

  ],

app.module.ts

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

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

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

import { AppRoutingModule } from './app-routing.module';

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

import * as $ from 'jquery';

import { BasicformComponent } from './basicform/basicform.component';

import { Basicform1Component } from './basicform1/basicform1.component';

@NgModule({

  declarations: [

    AppComponent,

    BasicformComponent,

    Basicform1Component

  ],

  imports: [

    BrowserModule,

    AppRoutingModule,

    FormsModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

Step 2: Add classes which you want to use as model class.

Using –

 Ng g class classname

We are adding constructor so that classes can be initialized easily.

Food.ts

import { MealTypes } from './meal-types';

import { MultiSelectCheckBox } from './multi-select-check-box';

export class Food {

    FoodId:number;

    Name:string;

    FoodAccessCode:string;

    Iscompleted:boolean;

    TimeOfMeal:[];

    MealTypes:MealTypes[];

    MealTime:MealTypes[];

    MealTimeSelected:string;

    MealTypeSelected:string[];

    WeekdaysSelect:MultiSelectCheckBox[];

    WeekdaysSingleSelect:MultiSelectCheckBox[];

}

Meal-type.ts

export class MealTypes {

    public Name:string;

    public Value:string;

    constructor(name:string,value:string){

this.Name = name;

this.Value = value;

    }

   }

multi-select-check-box.ts

export class MultiSelectCheckBox {

    Name:string;

    Checked:boolean;

    Id:string;

    constructor(name:string,checked:boolean,id:string){

this.Name = name;

this.Checked = checked;

this.Id=id;

    }

}

Step 3: Add initialized code in component

ngOnInit() {

    this.food = new Food();

    this.food.FoodId =1;

    this.food.FoodAccessCode="axod";

    this.food.MealTime =[];

    this.food.MealTime.push(new MealTypes("Morning","8AM"));

    this.food.MealTime.push(new MealTypes("Evening","12PM"));

    this.food.Iscompleted=true;

    this.food.MealTimeSelected = "12PM";

basicform.component.ts

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

import { Food } from '../food';

import { MealTypes } from '../meal-types';

import { MultiSelectCheckBox } from '../multi-select-check-box';

@Component({

  selector: 'app-basicform',

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

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

})

export class BasicformComponent implements OnInit {

food:Food;

  constructor() { }

  ngOnInit() {

    this.food = new Food();

    this.food.FoodId =1;

    this.food.FoodAccessCode="axod";

    this.food.MealTime =[];

    this.food.MealTime.push(new MealTypes("Morning","8AM"));

    this.food.MealTime.push(new MealTypes("Evening","12PM"));

    this.food.Iscompleted=true;

    this.food.MealTimeSelected = "12PM";

    this.food.MealTypes =[];

    this.food.MealTypes.push(new MealTypes("Meal1","Meal1e123"));

    this.food.MealTypes.push(new MealTypes("Meal2","Meal2e4123w"));

    this.food.MealTypes.push(new MealTypes("Meal3","Meal3e125t"));

    this.food.MealTypeSelected =["Meal1e123","Meal3e125t"];

    //this.food.MealTypeSelected.push(new MealTypes("Meal1","123"));

   // this.food.MealTypeSelected.push(new MealTypes("Meal164","125t"));

this.food.WeekdaysSelect =[];

this.food.WeekdaysSelect.push(new MultiSelectCheckBox("Mon",true,"Monday"));

this.food.WeekdaysSelect.push(new MultiSelectCheckBox("Tue",false,"Tuesday"));

this.food.WeekdaysSelect.push(new MultiSelectCheckBox("Wed",false,"Wednesday"));

this.food.WeekdaysSingleSelect =[];

this.food.WeekdaysSingleSelect.push(new MultiSelectCheckBox("Mon",false,"Monday"));

this.food.WeekdaysSingleSelect.push(new MultiSelectCheckBox("Tue",true,"Tuesday"));

this.food.WeekdaysSingleSelect.push(new MultiSelectCheckBox("Wed",false,"Wednesday"));

  }

  onSubmit() {

var me = this.food;

  }

  radioChangeHandler(event:any){

    for(let i=0;i<this.food.WeekdaysSingleSelect.length;i++){

if(this.food.WeekdaysSingleSelect[i].Id == event.target.value){

  this.food.WeekdaysSingleSelect[i].Checked=true;

}

else{

  this.food.WeekdaysSingleSelect[i].Checked=false;

}

    }

var me = event.target.value;

  }

}

Step 4: Add form and model binding code in template.

.CSHTML

<p>

  basicform works!

</p>

<div class="row">

<div class="col-sm-12">

  <div id="form-section">

    <form (ngSubmit)="onSubmit()" #loginForm="ngForm">

      <h2>{{food.Name | uppercase}} Details</h2>

      <div class="form-row"> 

        <div class="form-group col-md-6">

          <label for="disabledTextInput">Food Id</label>

          <input type="text" [(ngModel)]="food.FoodId" name="food.FoodId" placeholder="id" class="form-control">

        </div>

        <div class="form-group col-md-6">

          <label for="exampleInputPassword1">Password</label>

          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">

        </div>

      </div>

    

      <div class="form-group form-check">

        <input type="checkbox" class="form-check-input" id="exampleCheck1" name="food.Iscompleted" [(ngModel)]="food.Iscompleted">

        <label class="form-check-label" for="exampleCheck1">Check me out</label>

      </div>

      <div class="form-group">

        <label for="exampleFormControlSelect1">Meal Time</label>

        <select class="form-control" id="meal-time" name="food.MealTimeSelected" [(ngModel)]="food.MealTimeSelected">

          <option *ngFor="let item of food.MealTime" [value]="item.Value">

            {{item.Name}}

          </option>

        </select>

      </div>

      <div class="form-group">

        <label for="exampleFormControlSelect2">Meal Type multiple select</label>

        <select multiple class="form-control" name="food.MealTypeSelected" [(ngModel)]="food.MealTypeSelected">

          <option *ngFor="let item of food.MealTypes" [value]="item.Value">

            {{item.Name}}

          </option>

        </select>

      </div>

      <div class="form-group">

        <div class="form-check form-check-inline" *ngFor="let item of food.WeekdaysSelect">

          <input class="form-check-input" name="{{item.Id}}" type="checkbox" [(ngModel)]="item.Checked" id={{item.Id}}>

          <label class="form-check-label" for="inlineCheckbox1">{{item.Name}}</label>

        </div>

      </div>

      <div class="form-group">

        <div class="form-check form-check-inline">

          <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">

          <label class="form-check-label" for="inlineCheckbox1">1</label>

        </div>

        <div class="form-check form-check-inline">

          <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">

          <label class="form-check-label" for="inlineCheckbox2">2</label>

        </div>

        <div class="form-check form-check-inline">

          <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>

          <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>

        </div>

      </div>

     <div class="form-group">

      <div class="form-check form-check-inline" *ngFor="let item of food.WeekdaysSingleSelect">

        <input *ngIf="item.Checked == true" class="form-check-input1" type="radio" name="sameRadio" value="{{item.Id}}"

     id={{item.Id}} [checked]=true (change)="radioChangeHandler($event)">

        <input *ngIf="item.Checked!=true" class="form-check-input" type="radio" name="sameRadio" value="{{item.Id}}"

         id={{item.Id}} (change)="radioChangeHandler($event)">

        <label class="form-check-label" for="inlineRadio1">{{item.Name}}</label>

        <!-- <input *ngIf="item.Checked!=true" class="form-check-input" type="radio" name="sameRadio" value="{{item.Id}}"

         id={{item.Id}} [checked]="item.Checked == true?true:false">

        <label class="form-check-label" for="inlineRadio1">{{item.Name}}</label> -->

      </div>

     </div>

      <div class="form-group">

        <div class="form-check form-check-inline">

          <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" [checked]=true>

          <label class="form-check-label" for="inlineRadio1">1</label>

        </div>

        <div class="form-check form-check-inline">

          <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2" (click)="radioChangeHandler">

          <label class="form-check-label" for="inlineRadio2">2</label>

        </div>

        <div class="form-check form-check-inline">

          <input class="form-check-input" type="radio" (change)="radioChangeHandler" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>

          <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>

        </div>

      </div>

      <button type="submit">Submit</button>

    </form>

  </div>

</div>

</div>

Step 5: Add calling component code in appcomonent

app.component.html

<!--The content below is only a placeholder and can be replaced.-->

<div class="container">

  <div class="row">

    <div class="col-sm-12">

      <h1>Welcome to Myzingonline</h1>

    </div>

   

  </div>

<div class="row">

  <div class="col-sm-12" id="menu-bar">

    <ul class="menu">

      <li> <a routerLink="/basicForm" > Basic Form</a> </li>

      <li> <a routerLink="/basicform2" > Basic Form 1</a> </li>

    </ul>

  </div>

</div> 

<div class="row">

  <div class="col-sm-12">

    <router-outlet></router-outlet>

  </div>

</div>

</div>

app.component.ts

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

import * as $ from 'jquery';

@Component({

  selector: 'app-root',

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

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

})

export class AppComponent implements OnInit {

  title = 'mynewapp';

  ngOnInit(){

    $(document).ready(function(){

      //alert('hello I am here');

    });      

  }

}

Output will be

Share on Google Plus

About myzingonline

Myzingonline is all about zing to share experience, knowledge, likes, dislikes and ideas of a person to the world.