Template Driven Form && Validations

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { ContactFormComponent } from './contact-form/contact-form.component';
import { SignupFormComponent } from './signup-form/signup-form.component';
import { NewCourseFormComponent } from './new-course-form/new-course-form.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ,    ReactiveFormsModule ],
  declarations: [ AppComponent, HelloComponent, ContactFormComponent  , SignupFormComponent, NewCourseFormComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

contact-form.compnent.ts

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

@Component({
  selector: 'contact-form',
  templateUrl: './contact-form.component.html',
  styleUrls: ['./contact-form.component.css']
})
export class ContactFormComponent implements OnInit {

  public contactMethodArray: any[];

  constructor() { }

  ngOnInit() {

    this.contactMethodArray = [
      {
        id: 1,
        method: 'Phone'
      },
      {
        id: 2,
        method: 'Sms'
      },

      {
        id: 3,
        method: 'Voip'
      },

      {
        id: 4,
        method: 'Skype'
      },

    ]


  }

  LogFormControlObject = (val) => {

    console.log(val);

  }

  submit = (ref: any) => {
    console.log(ref);
    console.log(ref.value);
  }

}

contact-form.component.html

<form #f="ngForm" (ngSubmit)="submit(f)">

  <div class="form-group">
    <label for="firstName">First Name</label>
    <input required minlength=10 type="text" ngModel #FirstName="ngModel" class="form-control" name="firstName"
      id="firstName" (change)="LogFormControlObject(FirstName)">

    <div class="alert alert-danger" *ngIf="!FirstName.valid && FirstName.touched">
      <span *ngIf="FirstName.errors.required"> This Field Is Requierd </span>
      <span *ngIf="FirstName.errors.minlength"> MinLength is {{FirstName.errors.minlength.requiredLength}} and you type
        {{FirstName.errors.minlength.actualLength}} </span>

    </div>

  </div>


  <div class="form-group">
    <label for="lastname">LastName Name</label>
    <input required type="text" ngModel #lastname="ngModel" class="form-control" name="lastname">

    <div class="alert alert-danger" *ngIf="!lastname.valid && lastname.touched">
      <span *ngIf="lastname.errors.required"> This Field Is Requierd </span>
    </div>

  </div>


  <div class="checkbox">
    <label for="Devloper">Devloper</label> &nbsp;
    <input type="checkbox" name="dev" ngModel #dev="ngModel">
  </div>

  <div class="checkbox">
    <label for="Designer">Designer</label> &nbsp;
    <input type="checkbox" name="designer" ngModel #designer="ngModel">
  </div>


  <div class="form-group">
    <label for="contactMethod">contactMethod</label>
    <select required multiple name="contactMethod" ngModel #contactMethod="ngModel" id="contactMethod"
      class="form-control">

      <!-- [ngValue]="item" insert a whole objetc-->
      <option value="" disabled>Contact Method</option>
      <option *ngFor="let item of contactMethodArray" [value]="item.id">{{item.method}}</option>


    </select>
    <div class="alert alert-danger" *ngIf="!contactMethod.valid && contactMethod.touched">
      <span *ngIf="contactMethod.errors.required"> This Field Is Requierd </span>
    </div>
  </div>



  <div class="form-check">
    <input class="form-check-input" type="radio" name="opSystem" ngModel value="mac">
    <label class="form-check-label" for="opSystem">
      Mac
    </label>
    <br>
    <input class="form-check-input" type="radio" name="opSystem" ngModel value="pc">
    <label class="form-check-label" for="opSystem">
      Pc
    </label>
  </div>



  <button class="btn btn-primary" [disabled]="!f.valid">
    Submit
  </button>

  {{ f.value | json  }}

</form>

contact.form.compnent.css

.form-control.ng-touched.ng-invalid{

    border : 2px solid red;
}