[Angular2 Form] Use RxJS Streams with Angular 2 Forms

  <!--

    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, 2))
  }

  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!";
      })

  }
}