Angular Form

  Template-Driven form:-

mostly work done in html template

Reactive Form:-

mostly work done in component class

Data flow with forms:--

template--class--service[api]..database

ngModle:-[binding]:-for value attach

<form #loginForm="ngForm" (ngSubmit)=userLogin(loginForm.controls) >

check html[that shows the propery]

Reactive Form:--

FormGroup:--Form Group will handle the complete form

FormControl:-it handles specific field

two fields so we have to define 2 form control inside the formgroup

Reactive form Validator:--

1import validator

in form control array for validation

2.define getter

<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>

...

mylogin(data:any){

    console.log(data);

    

  }

form array:

the form array is a way to manage the collection of form controls in angular

the controlls can be FormGroup,Form control or another array