首页 > 代码库 > [Angular2 Form] Use RxJS Streams with Angular 2 Forms
[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
[Angular2 Form] Use RxJS Streams with Angular 2 Forms
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。