案例

AbstractControl

它提供了一些所有控件和控件组共有的行为，比如运行验证器、计算状态和重置状态。 它还定义了一些所有子类共享的属性，如 value、valid 和 dirty。不允许直接实例化它。
文档API

——————————————————————————
比较一下用表单构建器和手动创建实例这两种方式。

FormBuilder

this.checkoutForm = this.formBuilder.group
this.checkoutForm.reset()

  1. import { FormBuilder } from "@angular/forms";
  3. checkoutForm;
  5. constructor(private: formBuilder: FormBuilder) {
  6.   this.checkoutForms = this.formBuilder.group({
  7.       name: '',
  8.     address: ''
  9.   });
  10. }

formGroup, ngSubmit

[formGroup]="checkoutForm"

  1. <form [formGroup]="checkoutForms" (ngSubmit)="onSubmit(checkoutForm.value)"></form>
  1. export class ProfileEditorComponent {
  2.   profileForm = new FormGroup({
  3.     firstName: new FormControl(''),
  4.     lastName: new FormControl(''),
  5.   });
  6. }
  1. this.checkoutForms = new FormGroup({
  2.   first: new FormControl('Nancy', Validators.minLength(2)),
  3.   last: new FormControl('Drew'),
  4. });

form 标签所发出的 submit 事件是原生 DOM 事件，通过点击类型为 submit 的按钮可以触发本事件。这还让用户可以用回车键来提交填完的表单。

FormControl

  1. import { FormControl } from '@angular/forms';
  3. @Component({
  4.   selector: 'app-reactive-favorite-color',
  5.   template: `
  6.     Favorite Color: <input type="text" [formControl]="favoriteColorControl">
  7.   `
  8. })
  9. export class FavoriteColorComponent {
  10.   favoriteColorControl = new FormControl('');
  11. }

formControlName

使用 formControlName 属性绑定来把 checkoutForm 表单控件中的 name 和 address 绑定到它们的输入字段

  1. <form [formGroup]="checkoutForm" (ngSubmit)="onSubmit(checkoutForm.value)">
  2.   <div>
  3.     <label>Name</label>
  4.     <input type="text" formControlName="name">
  5.   </div>
  6.   <div>
  7.     <label>Address</label>
  8.     <input type="text" formControlName="address">
  9.   </div>
  10.   <button class="button" type="submit">Purchase</button>
  11. </form>

多种类型的用法

image.png

button submit

  1. <button type="submit" [disabled]="!profileForm.valid">Submit</button>
  1. onSubmit() {
  2.   // TODO: Use EventEmitter with form value
  3.   console.warn(this.profileForm.value);
  4. }


valueChanges

如果空间是disabled，valueChanges中不会包含此空间，formly的modelChange中含有

updateValueAndValidity

也会触发formly的modelChange
image.png

  1. this.formControl.updateValueAndValidity({
  2.     onlySelf: true,
  3.   emitEvent: true
  4. })

statusChange

一般的提交表单
filter中应该取消订阅

  1. this.form.statusChanges
  2.   .pipe(
  3.     filter(() => this.form.valid)),
  4.     takeUntil(this.destroy$)
  5.   .subscribe(() => this.onFormValid());
  7. ngOnDestroy() {
  8.   this.destroy$.next();
  9. }

自定义表单控件

Angular ControlValueAccessor - 自定义表单控件介绍与实战

ngModel双向绑定

使用ControlValueAccessor自定义表单数据双向绑定
网易云音乐播放器滑块组件ngModel双向绑定