Forms in Angular 13

 

app.Component.html

<form #basicForm="ngForm" (ngSubmit)="getFormData(basicForm.value)">

    <input type="text" ngModel name="userName" placeholder="Enter You Name"/> <br/><br/>

    <input type="text" ngModel name="email" placeholder="Enter Your Email"/> <br/><br/>

    <input type="password" ngModel name="password" placeholder="Enter Password"/> <br/><br/>

    <button>Submit</button>

  </form>

  <br/><br/>

  <ul>

    <li>{{getFormDetails.userName}}</li>

    <li>{{getFormDetails.email}}</li>

    <li>{{getFormDetails.password}}</li>

  </ul>

app.component.ts:

getFormDetails:any=[];

getFormData(data:NgForm)

{

  console.warn(data);

this.getFormDetails=data;

}

}

App.Module.ts:

import {FormsModule} from '@angular/forms'

Output: