Create Template Driven Forms in Angular

Create Template Driven Forms in Angular:-

1st:-   Create Component using ng g c scs
2nd:-  Create FormDesign Similar to HTML Form


<form  method="post" (ngSubmit)="display()"  #fs="ngForm">
Enter name
<input type="text" name="txt"  [(ngModel)]="txt" />
<br>
<input type="submit" name="btnsubmit" value="submit" />
</form>

<h1>{{rs}}</h1>
here ngSubmit is used for a button click ,ngModel is used to bind HTML element text to the controller object.


3rd:-
Write Code to display TextField Data under TypeScript code using Component Class
export class RaheemComponent implements OnInit {
  txt=''
  rs=''
  constructor() {
    this.rs=''

  }

  ngOnInit() {
  }
  display()
   {
    alert(this.txt);
    this.rs= this.txt;
  }

}

4th:-  When you run this code then it will appear error because FormModule Should be import under appmodule.ts without this we can not access data from HTML Template to Component.

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

 imports: [

    BrowserModule,

    AppRoutingModule,

    FormsModule

  ]