<!--

    Learn @ViewChld()

    valueChanges: show the value,

    statusChanges: show VALIDE or INVALIDE,

    Observable.combineLatest

  -->

  <form #myForm3="ngForm" name="myForm3">

    <input type="text" #techRef="ngModel" ngModel required placeholder="Type Angular2..." name="tech" pattern="Angular2">

    <span *ngIf="techRef.valid" class="success-message">{{answer}}</span>

  </form>

  <div class="error-messages" *ngIf="!myForm3.valid">

    <span class="error-message" *ngIf="techRef.errors?.pattern">{{techRef.errors?.pattern.requiredPattern}} only</span>

    <span class="error-message" *ngIf="techRef.errors?.required">Requried</span>

  </div>

  <pre>

    Input: {{techRef.errors | json}}

  </pre>

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

import {Observable} from 'rxjs';

@Component({

  selector: 'app-message',

  templateUrl: './message.component.html',

  styleUrls: ['./message.component.css']

})

export class MessageComponent implements OnInit {

  @ViewChild('myForm3') form;

  message = "Hello";

  answer: string;

  constructor() {

  }

  ngOnInit() {

  }

  onSubmit(formValue) {

    console.log("formValue", JSON.stringify(formValue, null, ))

  }

  ngAfterViewInit() {

    this.form.valueChanges

      .subscribe((res) => console.table(res));

    this.form.statusChanges

      .subscribe((res) => console.log(res));

    Observable

      .combineLatest(

        this.form.valueChanges,

        this.form.statusChanges,

        (value, status) => ({value, status})

      )

      .filter( ({status}) => {

        return status === "VALID";

      })

      .subscribe( val => {

        this.answer = "You are right!";

      })

  }

}