Angular 中的表单

{
  'userinfo': {
    'username': ''
  }
}

export class ReactiveFormComponent implements OnInit {
  // FormControl 这个构造函数可以接收一个参数，用来指定 FormControl 的初始值
  username: FormControl = new FormControl('zhangsan')
}

// 如果多于三个参数，其他的元素会被忽略
username: ['初始值', 校验方法, 异步的校验方法],

import { ReactiveFormsModule } from '@angular/forms'

@NgModule({
  // ...
  imports: [
    ReactiveFormsModule
  ]
})

import { FormGroup, FormControl, FormArray } from '@angular/forms'

export class ReactiveFormComponent implements OnInit {
  // FormControl 这个构造函数可以接收一个参数，用来指定 FormControl 的初始值
  username: FormControl = new FormControl('zhangsan')

  formModel: FormGroup = new FormGroup({
    username: new FormControl('zhangsan'),
    dateRange: new FormGroup({
      from: new FormControl(),
      to: new FormControl()
    }),
    emails: new FormArray([
      new FormControl('123@126.com'),
      new FormControl('456@126.com')
    ])
  })

  constructor() { }

  ngOnInit() { }

  onSubmit() {
    console.log(this.formModel.value)
  }

  addEmail() {
    // 拿到了是一个 FormArray 类型的对象，所以强制转换一下类型
    const emails = this.formModel.get('emails') as FormArray
    // 点击新增的时候添加一个 input
    emails.push(new FormControl())
  }
}

import { ControlValueAccessor } from '@angular/forms'

export class ImageListSelectComponent implements ControlValueAccessor {

  public propagateChange = (_: any) => {}

  // 这个方法用来写入值，就像之前的设置初始值，或者在方法内部写入值，比如 this.form.patchValue 或者 this.form.setValue
  writeValue(obj: any): void {
    this.selected = obj
  }

  // 如果表单的 value 或者值发生了变化，需要通知表单，定义一个空函数接收系统传递的一个函数在表单发生变化的时候 emit 这个事件通知表单需要进行更新
  registerOnChange(fn: any): void {

  }

  // 指明表单控件什么情况下算是 Touch 状态，需要告诉给表单定义一个空函数来进行接收
  registerOnTouched(fn: any): void {
    this.propagateChange = fn
  }

  // 然后在发生变化的时候，emit 通知表单发生了变化
  onChange(i) {
    this.propagateChange(this.selected)
  }

}

import { forwardRef } from '@angular/core'
// 引入 NG_VALUE_ACCESSOR 令牌
import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms'

@Component({
  providers: [
    {
      // 将自身注册到这个令牌上
      provide: NG_VALUE_ACCESSOR,
      // useExisting 使用已有的，也就是自身
      // 然后这里存在一个问题，在元数据当中，自身可能没有被创建，所以注册不到令牌上面，所以这里使用 forwardRef() 方法，就可以引用自身了
      // 会等待实例化之后才会进行引用，这样写不影响使用 useExisting 注册到依赖池当中
      useExisting: forwardRef(() => ImageListSelectComponent),
      // 类似 NG_VALUE_ACCESSOR 这种令牌，本身都是多对一的，比如多个控件使用同一个令牌
      multi: true
    },
    // 验证同理，也需要是可以验证的
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => ImageListSelectComponent),
      multi: true
    }
  ]
})

validate(c: FormControl): {[key: string]: any} {
  return this.selected ? null : {
    imageListInvalid: {
      valid: false
    }
  }
}

import { Component, Input, forwardRef } from '@angular/core'
import { ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormControl } from '@angular/forms'

@Component({
  selector: 'app-image-list-select',
  templateUrl: './image-list-select.component.html',
  styleUrls: ['./image-list-select.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => ImageListSelectComponent),
      multi: true
    },
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => ImageListSelectComponent),
      multi: true
    }
  ]
})

export class ImageListSelectComponent implements ControlValueAccessor {

  @Input() title = '选择'
  @Input() cols = '6'
  @Input() rowHeight = '64px'
  @Input() items: string[] = []

  public selected: string
  public propagateChange = (_: any) => { }

  constructor() { }

  onChange(i) {
    this.selected = this.items[i]
    this.propagateChange(this.selected)
  }

  writeValue(obj: any): void {
    this.selected = obj
  }

  registerOnChange(fn: any): void {
    this.propagateChange = fn
  }

  registerOnTouched(fn: any): void { }

  validate(c: FormControl): { [key: string]: any } {
    return this.selected ? null : {
      imageListInvalid: {
        valid: false
      }
    }
  }
}

import { FormBuilder, FormGroup } from '@angular/forms'

export class RegisterComponent implements OnInit {

  public items: string[] = [
    'assets/avatar/01.jpg',
    'assets/avatar/02.jpg',
    'assets/avatar/03.jpg',
    'assets/avatar/04.jpg'
  ]
  form: FormGroup

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.form = this.fb.group({
      email: [],
      name: [],
      password: [],
      repeat: [],
      avatar: ['assets/1.jpg']
    })
  }
}