如何以角度反应形式将验证器添加到 formModel答案

【问题标题】：How to add validators to a formModel in angular reactive forms如何以角度反应形式将验证器添加到 formModel
【发布时间】：2017-12-08 15:50:50
【问题描述】：

我正在关注 Angular 的反应式表单教程，并且想知道在使用类模型进行表单组定义时如何将属性设置为 required 或任何其他验证器。

https://angular.io/guide/reactive-forms#the-data-model-and-the-form-model

我注意到它创建了一个默认的空字符串作为初始值。为什么我不能在没有默认值的情况下定义地址模型 - 否则会引发错误？例如我不能说street: string。我想拥有一个默认值在技术上可以满足所需的验证——但这不是现实世界的用例。

理想情况下，我想在没有默认值的情况下定义我的类模型，并使地址和某些地址字段成为必需的。这是否可以使用响应式表单和表单模型？

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


this.heroForm = this.fb.group({
  name: ['', Validators.required ],
  address: this.fb.group(new Address()), // <-- How to make address and certain address fields required?
  power: '',
  sidekick: ''
});

【问题讨论】：

标签： angular angular-forms

【解决方案1】：

您可以提供一个额外的对象来添加验证器或异步验证器（参见 doc here）

this.heroForm = this.fb.group({
  name: ['', Validators.required ],
  address: this.fb.group(new Address(), { validator: Validators.required }), // <-- How to make address required?
  power: '',
  sidekick: ''
});

但在这种情况下，所需的将不起作用，因为您的“new Adress()”是一个对象，因此不是 null 或未定义。

你必须为你的 Adress 类创建一个自定义验证器

    const adressValidator = (fg: FormGroup) => {
         test = fg.value; 

         if (!test.street || !test.city || ... ) {
             return { adress: { valid : false }};
         }
    }

    and 

   this.heroForm = this.fb.group({
      name: ['', Validators.required ],
      address: this.fb.group(new Address(), { validator: adressValidator}), // <-- How to make address required?
      power: '',
      sidekick: ''
    });

希望对你有帮助

【讨论】：