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

  • 相关阅读:
    子页面向父页面传值
    UEditor的使用方法
    MVC 生成PDf表格并插入图片
    简单行列转换记录
    此数据库没有有效所有者“的解决,我很受用
    ASP.NET MVC3 使用kindeditor编辑器获取不到值
    c#读写文件
    VB 中Sub和Function的区别
    问题集
    hadoop2.7.2运行例子时报错
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5914983.html
Copyright © 2011-2022 走看看