Angular Reactive Form Tips

[JounQin]

1. 校验 FormControl 如果需要与其他 FormControl 联动检查时，应该在向上一级的 FormGroup 中设置相关 Validator 并在其中调用 control.setErrors() 来设置校验结果，这样可以保证多个 FormControl 变动时只需要进行一次校验。

示例代码：

export const domainValidator = (group: FormGroup) => {
  const prefixCtrl = group.get('prefix')
  const prefix: string = prefixCtrl.value
  const suffix: string = group.get('suffix').value
  const isPrefixValid =
    prefix.length + (suffix.length - +suffix.startsWith('*')) <= 20
  prefixCtrl.setErrors(isPrefixValid ? null : { maxlength: true })
}

export class TestComponent {
  form = this.fb.group(
    { prefix: '', suffix: '' },
    { validators: domainValidator },
  )
}