zoukankan      html  css  js  c++  java
  • [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

  • 相关阅读:
    JSONObject登录接口
    HttpClient跨域请求post
    线段树个人理解及模板
    Python基本语法(一)
    Boyer-Moore算法
    Sunday算法浅谈
    Kmp算法浅谈
    bm坏字符 , Horspool算法 以及Sunday算法的不同
    字典树的建立和基本查找
    CF Round551 Div2 题解
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5914983.html
Copyright © 2011-2022 走看看