[Angular2 Form] Use RxJS Streams with Angular 2 Forms

Angular 2 forms provide RxJS streams for you to work with the data and validity as it flows out of the forms. These streams allow you handle complex scenarios and asynchronous scenarios with relative ease. This example shows you how to log out the values of the form when the form is valid.

 

  <!--

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

  }
}

 

Github