angular forms

 angular template form

import appmodule.ts

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

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

inside imports:

    ReactiveFormsModule,

    HttpClientModule,

<div>

    <form action="" #basicForm="ngForm"

    (submit)="getformdata(basicForm.value)">

        <div>

<label for="email">enter Email</label>

<input type="text" name="email"  #email="ngModel" required ngModel>

<span *ngIf="email.invalid &&email.touched">please enter email</span>

</div>

<div>

    <label for="password">enter Password</label>

    <input type="password" name="pwd" #pwd="ngModel" required pattern="[a-zA-Z]+$"

    ngModel>

    <div *ngIf="pwd.touched">

        <p *ngIf="pwd.errors?.['required']">password is a required field!</p>

        <p *ngIf="pwd.errors?.['pattern']">This is not a valid password!!!</p>

</div>

</div>

<div>

    <button [disabled]="basicForm.invalid">Save</button>

</div>

    </form>

</div>

Ts:

 getformdata(data:NgForm){

    console.log(data);

    

  }

..................

template driven form:

................................................

ts file:---

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

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

import { MyserviceService } from '../services/myservice.service';

@Component({

  selector: 'app-home',

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

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

})

export class HomeComponent implements OnInit {

info:any

  constructor(private userData:MyserviceService) { }

loginform=new FormGroup({

  username:new FormControl('',[Validators.required,Validators.minLength(3)]),

  userpass:new FormControl('',[Validators.required])

})

  ngOnInit(): void {

  }

  getData(){

    this.info=this.loginform.value;

    this.userData.insertPost(this.info)

    .subscribe(response => {

       console.log(response)

  })

  }

  get username(){

    return this.loginform.get('username');

  }

  get userpass(){

return this.loginform.get('userpass');

  }

}

......................

html file:--

<div>

    <form [formGroup]="loginform" (ngSubmit)="getData()">

<label for="name">Enter name</label>

<input type="text"  formControlName="username" >

<!-- <span *ngIf="username && username.touched &&username.invalid">

please enter name

</span> -->

<!-- <div *ngIf="username.touched">

    <p *ngIf="username.errors?['required']">username is a required field!</p>

    <p *ngIf="username.errors?['pattern']">This is not a valid name!!!</p>

</div> -->

<br>

<label for="password">Enter Password</label>

<input type="password" name="pass"

formControlName="userpass" >

<span *ngIf="userpass && userpass.touched &&userpass.invalid">

    please enter password

    </span>

<br>

<input type="submit" [disabled]="loginform.invalid" value="save">

    </form>

</div>