使用Angular reactive form发送HTTP请求的一个简单例子

form源代码:

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'jerryform',
  template: `
    Favorite Color: <input type="text" [formControl]="favoriteColorControl">
  `
})
export class ReactFormComponent implements OnInit  {
  ngOnInit(): void {
    this.favoriteColorControl.valueChanges.subscribe(
      (value) =>{
        console.log('new value: ' + value);
      }
    )
  }
  favoriteColorControl = new FormControl('');
}

每当form内input field值发生变化时,通过this.formcontrol.valueChanges发送事件,valueChanges类型为EventEmitter,本质是一个Observable,在下图_initObservables方法里初始化:

使用Angular reactive form发送HTTP请求的一个简单例子

一旦input字段的值发生变化后,自动触发updateControl:

使用Angular reactive form发送HTTP请求的一个简单例子

FormControl的类型:

使用Angular reactive form发送HTTP请求的一个简单例子

FormControlDirective的类型:

使用Angular reactive form发送HTTP请求的一个简单例子

使用Angular reactive form发送HTTP请求的一个简单例子

更多Jerry的原创文章,尽在:“汪子熙”:
使用Angular reactive form发送HTTP请求的一个简单例子

上一篇:Rocket - debug - TLDebugModuleInner


下一篇:data race Comparing the performance of atomic, spinlock and mutex Spin-Locks vs. Atomic Instruction