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

  • 相关阅读:
    Salesforce PDF打印
    Salesforce Visualforce分页
    Salesforce 开发实践探索
    Salesforce 锁定记录
    Salesforce 通过代码实现权限共享
    Salesforce Aura开发 Component表单初解
    phpqrcode生成动态二维码简单实例
    PHP结合zyupload多功能图片上传实例
    PHP程序员的技术成长规划 第三阶段:高级阶段
    PHP程序员的技术成长规划 第二阶段:提高阶段
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5914983.html
Copyright © 2011-2022 走看看