[Angular2 Form] Use RxJS Streams with Angular 2 Forms
Angular with use Form Rxjs forms Streams Angular2
2023-09-14 09:00:53 时间
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!"; }) } }
相关文章
- [ngx-formly] Dynamically disable a Form field with Angular Formly
- [Angular & Unit Testing] Testing Component with Store
- [Angular] Content Projection with ng-content
- [Angular Directive] Create a Template Storage Service in Angular 2
- [Angular Directive] 2. Add Inputs to Angular 2 Directives
- [Angular2 Router] Style the Active Angular 2 Navigation Element with routerLinkActive
- [Angular2 Router] Lazy Load Angular 2 Modules with the Router
- [Angular 2] Passing Observables into Components with Async Pipe
- [Angular 2] Inject Service
- [Angular] oc.lazyLoad with Angular ui router
- [Angular] Parent scope, scope overwritten, using factory() to share data between controller
- [Angular Unit Testing] Testing component with content projection
- [Angular] Modify User Provided UI with Angular Content Directives
- [Angular] N things you might don't know about Angular Route
- [Angular] Handle HTTP Errors in Angular with HttpErrorResponse interface
- [Angular2 Router] Style the Active Angular 2 Navigation Element with routerLinkActive
- [Angular 2] Passing Observables into Components with Async Pipe
- [Whole Web] [AngularJS] Localize your AngularJS Application with angular-localization
- [AngularJS] Using angular.bootstrap to Initialize Your App
- [Unit Testing] Karma with Angular mocks
- Angular Form (响应式Form) 学习笔记
- Angular应用的部署方式
- 如何在Angular项目里创建新的Service
- 【Angular专题】——【译】Angular中的ForwardRef
- angular input 为file on-change 无效