1. .tsファイル

↓これを追加

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

　　

export class AppComponent  {
}

　　↓　に変更

export class AppComponent  {
  public control = new FormControl('', [Validators.required]);
}

2. .htmlファイル

入力欄：<input type="text" [formControl]="control" required>
<div *ngIf="control.invalid && (control.dirty || control.touched)">
  <span *ngIf="control.hasError('required')">必須です。</span>
</div>

3. module.tsファイル

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

  imports: [
    ....
    ReactiveFormsModule,  // 追加
  ],

どんなバリデーションがあるか？

class Validators {
  static min(min: number): ValidatorFn
  static max(max: number): ValidatorFn
  static required(control: AbstractControl): ValidationErrors | null
  static requiredTrue(control: AbstractControl): ValidationErrors | null
  static email(control: AbstractControl): ValidationErrors | null
  static minLength(minLength: number): ValidatorFn
  static maxLength(maxLength: number): ValidatorFn
  static pattern(pattern: string | RegExp): ValidatorFn
  static nullValidator(control: AbstractControl): ValidationErrors | null
  static compose(validators: ValidatorFn[]): ValidatorFn | null
  static composeAsync(validators: AsyncValidatorFn[]): AsyncValidatorFn | null
}

フォーカスが移った時にバリデーションを行いたい

  public control = new FormControl('', [Validators.required]);

　　↓　このように書き換える

  public control = new FormControl('', {
    validators: [Validators.required] ,
    updateOn: 'blur'
  });