如何以角度响应形式将验证器添加到formModel(How to add validators to a formModel in angular reactive forms)

如何以角度响应形式将验证器添加到formModel(How to add validators to a formModel in angular reactive forms)

我正在按照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: '' });

I'm following along the reactive form tutorial for angular and was wondering how to make a property as required or any other validator when using class model for the form group definition.

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

I noticed that it creates a default empty string as the initial values. Why can't I define the address model without default values - otherwise it throws an error? e.g. I can't say street: string. I suppose having a default value technically fulfills the required validation - but that is not the real-world use case.

Ideally I'd like to define my class models without default values and make the address and certain address fields required. Is this possible using reactive forms and form models?

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

最满意答案

您可以提供额外的对象来添加验证器或异步验证器（请参阅文档）

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

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

你必须为你的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: '' });

希望能帮助到你

You can provider an extra object to add validator or async validator ( see 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: '' });

But in this case the required will not work as your "new Adress()" is an object, thus not null or undefined.

You well have to create a custom validator for you Adress 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: '' });

Hope it helps