template.txt

template.component.html
-------------------------
<h1>Template Driven Example</h1>

Welcome:{{username}}


<!-- Checking for minimum length -->
<form (submit)="sub(userfm)" #userfm="ngForm" class="col-6 bg-warning mx-auto">
    <div class="form-group">
    <label>Enter name:</label>
    <input #nmfld="ngModel" [(ngModel)]="nm" name="nm" required minlength="4" [ngClass]="{'fail':nmfld.invalid, 'succ':nmfld.valid}" class="form-control">
    <!-- <span *ngIf="nmfld.invalid">Enter Name</span> -->
    <section *ngIf="nmfld.invalid && nmfld.touched" class="errormsg">
        <p *ngIf="nmfld.errors.required">name is compulsory</p>
        <p *ngIf="nmfld.errors.minlength">Enter Atleast 4 Chars</p>
    </section>
</div>

<br>
<!-- Checking for Patterns like only numbers -->
    <article class="form-group">
    <label>Enter Pan no:</label>
    <input #panfld="ngModel" [(ngModel)]="panno" name="panno" required pattern="[0-9A-Z]{10}" [ngClass]="{'fail':panfld.invalid, 'succ':panfld.valid}" class="form-control">
    <section *ngIf="panfld.invalid && panfld.touched" class="errormsg">
        <p *ngIf="panfld.errors.required">Pan Number is Compulsory</p>
        <p *ngIf="panfld.errors.pattern">Enter Only Numbers</p>
    </section>
</article>

<!-- CHECKING FOR PASSWORD -->
<article class="form-group">
        <label>Enter password:</label>
        <input #pwdfld="ngModel" [(ngModel)]="pwd" name="pwd" required pattern={{rpwdfld.value}} [ngClass]="{'fail':pwdfld.invalid, 'succ':pwdfld.valid}" class="form-control">
        <section *ngIf="pwdfld.invalid && pwdfld.touched" class="errormsg">
            <p *ngIf="pwdfld.errors.required">pwd is Compulsory</p>
            <!-- <p *ngIf="pwdfld.errors.pattern">Enter valid pwd numbers and capital letters</p> -->
        </section>
    </article>
<!-- cHECKING FOR RE-ENTER PASSWORD -->
    <article class="form-group">
            <label>Re-enter password:</label>
            <input #rpwdfld="ngModel" [(ngModel)]="rpwd" name="rpwd" required pattern={{pwdfld.value}} [ngClass]="{'fail':rpwdfld.invalid, 'succ':rpwdfld.valid}" class="form-control">
            <section *ngIf="rpwdfld.invalid && rpwdfld.touched" class="errormsg">
                   
                <p *ngIf="rpwdfld.errors.required">re-pwd  is Compulsory</p>
                <p *ngIf="rpwdfld.errors.pattern">Must match</p>
            </section>
        </article>
<button class="btn btn-success" [disabled]="userfm.valid">Register</button>
</form>
  

-------------------------------------------------------------------------------------------


template..component.css
-----------------------
.errormsg 
{
    color:red;
}
.fail
{
    border: 2px solid red;
}
.succ
{
    border: 2px solid green;
    background-color: lightgreen;
    
}
-----------------------------------------------

template.component.ts
--------------------------
import { Component, OnInit } from '@angular/core';
import { analyzeAndValidateNgModules } from '@angular/compiler';

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



@Component({
  selector: 'app-template-driven',
  templateUrl: './template-driven.component.html',
  styleUrls: ['./template-driven.component.css']
})
export class TemplateDrivenComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    
  }
  var1:boolean=false
sub(u){
 alert("clicked")
  this.var1 = true
}
}
---------------------------------------------


app.module.ts
-------------------
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule}   from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';


import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TemplateDrivenComponent } from './template-driven/template-driven.component';
import { ReactiveformexampleComponent } from './reactiveformexample/reactiveformexample.component';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [
    AppComponent,
    TemplateDrivenComponent,
    ReactiveformexampleComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forRoot([
      {
        path:'reactive',
        component: ReactiveformexampleComponent
      }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

----------------------------------------