then code in all app.component.ts file Now updated to Angular4

 

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

@Component({
  selector: 'app-templatedrivenform',
  templateUrl: './templatedrivenform.component.html',
  styleUrls: ['./templatedrivenform.component.css']
})
export class TemplatedrivenformComponent {
  
  onSubmit(value:any){
    alert("Check console or form value")
    alert(value.name)
    console.log(value.name)

  }
  

}

Finally create a html file and paste this code

 

<div class="widget box">
                <div class="widget-header"> <h4> Template Driven Form</h4> </div>
                 <div class="widget-content">
<form #formData="ngForm" (ngSubmit)="onSubmit(formData.value)" novalidate>
                    <div class="row">
                        <div class="col-sm-12 col-md-12 col-lg-6 col-xs-12">
                            <div class="form-group row mb-1">
                                <label for="example-text-input" class="col-4 col-form-label col-form-label-sm text-right">Name</label>
                                <div class="col-8">
                                    <input class="form-control form-control-sm rounded-0" minlength="3" required name="name" #name="ngModel" ngModel type="text">
                                    {{name.className}}
                                    <div *ngIf="!formData.controls.name?.valid && (formData.controls.name?.dirty || formData.controls.name?.touched)" class="alert alert-danger">
   <div [hidden]="!formData.controls.name.errors.required">
        First Name is required
   </div>
    <div [hidden]="!formData.controls.name.errors.minlength">
        Name is too short.
   </div>
</div>
                                </div>
                            </div>
                            <div class="form-group row mb-1">
                                <label for="example-text-input" class="col-4 col-form-label col-form-label-sm text-right">Email</label>
                                <div class="col-8">
                                    <input class="form-control form-control-sm rounded-0" name="email" #email="ngModel" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" ngModel required type="email">
                                     <div *ngIf="!formData.controls.email?.valid && (formData.controls.email?.dirty || formData.controls.email?.touched)" class="alert alert-danger">
   <div [hidden]="!formData.controls.email.errors.required">
        Email is required
   </div>
   <div [hidden]="!formData.controls.email.errors.pattern">
        Enter valid email
   </div>
</div>
                                </div>
                            </div>
                            <div class="form-group row mb-1">
                                <label for="example-text-input" class="col-4 col-form-label col-form-label-sm text-right">Phone</label>
                                <div class="col-8">
                                    <input class="form-control form-control-sm rounded-0" pattern="^[789]\d{9}$" #phone="ngModel" name="phone" required type="tel" ngModel>
    <div *ngIf="!formData.controls.phone?.valid && (formData.controls.phone?.dirty || formData.controls.phone?.touched)" class="alert alert-danger">
   <div [hidden]="!formData.controls.phone.errors.required">
        Phone number is required
   </div>
   <div [hidden]="!formData.controls.phone.errors.pattern">
        Enter Valid format (Example)<br>
        9882223456<br>
8976785768<br>
7986576783<br>
   </div>
</div>                                 
                                </div>
                            </div>
                           
                            <div class="form-group row mb-1">
                                <label for="example-text-input" class="col-4 col-form-label col-form-label-sm text-right">Select</label>
                                <div class="col-8">
<select class="form-control form-control-sm" #select1="ngModel" required name="select1" required ngModel >
   <option selected>Select</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
    <div *ngIf="!formData.controls.select1?.valid && (formData.controls.select1?.dirty || formData.controls.select1?.touched)" class="alert alert-danger">
   <div [hidden]="!formData.controls.select1.errors.required">
       Select at least 1 option;
   </div>
                      </div>             
                                </div>
                            </div>
                          
                           

                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-6 col-xs-12">
                            <div class="form-group row mb-1">
                                <label for="exampleTextarea" class="col-4 col-form-label col-form-label-sm text-right">Example textarea</label>
                                <div class="col-8">
                                    <textarea required class="form-control rounded-0" minlength="10" name="textarea1" #textarea1="ngModel" required  rows="3" ngModel></textarea>
                                     <div *ngIf="!formData.controls.textarea1?.valid && (formData.controls.textarea1?.dirty || formData.controls.textarea1?.touched)" class="alert alert-danger">
   <div [hidden]="!formData.controls.textarea1.errors.required">
       Enter something in textarea
   </div>
    <div [hidden]="!formData.controls.textarea1.errors.minlength">
       Enter at least 10 character
   </div>
                      </div>  
                                </div>
                            </div>

   
 
    <div ngModelGroup="address"><div class="form-group row mb-1">
            <label class="col-4 col-form-label col-form-label-sm text-right">City</label>
              <div class="col-8">

<input type="text" class="form-control form-control-sm rounded-0"  #city="ngModel" name="city" required  ngModel>
           

             <div *ngIf="!formData.controls.address.controls.city?.valid && (formData.controls.address.controls.city?.dirty || formData.controls.address.controls.city?.touched)" class="alert alert-danger">
   <div [hidden]="!formData.controls.address.controls.city.errors.required">
       City is required
   </div>
    
                      </div> 
        </div>
        </div>
        
 
         <div class="form-group row mb-1">
            <label class="col-4 col-form-label col-form-label-sm text-right">Street</label>
              <div class="col-8">
            <input type="text" class="form-control form-control-sm rounded-0" #street="ngModel" required name="street" ngModel>
            
             
              </div>
        </div>
 
         <div class="form-group row mb-1">
            <label class="col-4 col-form-label col-form-label-sm text-right">Pin Code</label>
              <div class="col-8">
            <input type="text" class="form-control form-control-sm rounded-0" required pattern="^[1-9][0-9]{5}$" #pincode="ngModel" name="pincode" ngModel >
            
            
        </div></div></div>
 
                       

                           
                            
                          

                        </div>
                      
                    </div>
                    <div class="d-flex justify-content-center">
                      <button type="submit" [disabled]="!formData.form.valid" class="btn btn-info btn-sm"  role="button">Submit</button>
                      
</div>
</form>
                </div>
            </div>

After clicking on submit button check the console for values
Working demo of TemplateDrivenForm Demo Link