angular - 从数据模型创建 FormBuilder 组时如何添加验证器？

Question

根据 the Reactive Forms documentation ，我可以从

重构我的 FormGroup 定义

this.heroForm = this.fb.group({
  name: ['', Validators.required ],
  address: this.fb.group({
    street: '',
    city: '',
    state: '',
    zip: ''
  })
});

到

export class Address {
  street = '';
  city   = '';
  state  = '';
  zip    = '';
}

this.heroForm = this.fb.group({
  name: ['', Validators.required ],
  address: this.fb.group(new Address())
});

如果我从数据模型创建表单组，我该如何添加验证器？

Answer 1

根据 the FormBuilder source , group 采用第二个 extra 参数，您可以在其中定义验证器。 Todd Motto has an article on how to use it这表明以下内容:

export class Address {
  street = '';
  city   = '';
  state  = '';
  zip    = '';
}

this.heroForm = this.fb.group({
  name: ['', Validators.required ],
  address: this.fb.group(new Address(), { validator: this.myValidator })
});

this.myValidator = (control: AbstractControl): {[key: string]: boolean} => {
  const city= control.get('city');
  const state= control.get('state');
  ...
  if (allTheControlsAreValid) return null;
  else return { myCustomError: foo};
};

这允许您验证表单组，但不能验证控件。如果要在各个控件上设置验证器，可以在创建 formGroup 后以编程方式设置它们:

this.heroForm.get('address').get('city').setValidators([Validators.required, Validators.maxLength(30)]);