如何将验证器添加到 angular 反应形式的 formModel

Question

我正在关注 angular 的反应式表单教程，并且想知道如何在使用 class 模型时将属性制作为 required 或任何其他验证器对于表单组定义。

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

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

理想情况下，我想定义没有默认值的 class 模型，并使地址和某些地址字段成为必填项。这可能使用反应式表单和表单模型吗？

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: ''
});

Answer 1

您可以提供一个额外的对象来添加验证器或异步验证器（参见文档 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: ''
});

但在这种情况下，required 将不起作用，因为您的 "new Adress()" 是一个对象，因此不是 null 或 undefined。

您必须为您的地址创建自定义验证器 class

    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: ''
    });

希望对您有所帮助

如何将验证器添加到 angular 反应形式的 formModel

How to add validators to a formModel in angular reactive forms

angular

angular-forms