在使用 Angular Material 和 Formly 进行表单开发时,有时需要对嵌套的自定义类型进行验证。以下是一个示例,展示了如何在 Formly 模型中嵌套自定义类型并在 Angular Material 中添加验证。
首先,我们需要定义一个父级自定义类型,用于嵌套子级类型:
import { FormlyFieldConfig } from '@ngx-formly/core';
export interface NestedTypeModel {
title: string;
content: string;
nested: NestedType;
}
export interface NestedType {
title: string;
content: string;
}
export class ParentType {
static fieldGroup: FormlyFieldConfig[] = [
{
key: 'title',
type: 'input',
templateOptions: {
label: 'Title',
required: true,
},
},
{
key: 'content',
type: 'textarea',
templateOptions: {
label: 'Content',
required: true,
},
},
{
key: 'nested',
type: 'custom',
templateOptions: {
label: 'Nested Type',
},
validators: {
nested: {expression: 'formState.valid', message: 'Nested type is invalid'},
},
fieldGroup: [
{
key: 'title',
type: 'input',
templateOptions: {
label: 'Title',
required: true,
},
},
{
key: 'content',
type: 'textarea',
templateOptions: {
label: 'Content',
required: true,
},
},
],
},
];
}
注意,在父级类型的 “validators” 对象中添加了一个自定义验证器“nested”,用于验证嵌套的子级类型是否有效。
接下来,我们需要定义一个自定义类型,该类型用于嵌套在父级类型中:
import { FormGroup } from '@angular/forms';
import { FormlyFieldConfig, FormlyFormOptions } from '@ngx-formly/core';
import { NestedTypeModel } from './parent-type.model';
export class NestedTypeComponent {
title;
content;
form = new FormGroup({});
options: FormlyFormOptions = {};
fields: FormlyFieldConfig[] = [
{
key: 'title',
type: 'input',
templateOptions: {
label: 'Title',
required: true,
},
validators: {
validTitle: {expression: '!!model.title && model.title.length > 5', message: 'Title must be at least 5 characters'},
},
},
{
key: 'content',
type: 'textarea',
templateOptions: {
label: 'Content',
required: true,
},
validators: {
validContent: {expression: '!!model.content && model.content.length > 10', message: 'Content must be at least 10 characters'},
},
},
];
constructor() {}
get model(): NestedTypeModel {
return {title: this.title, content: this.content, nested: null};
}
get formState(): any {
return {valid: this.form.valid};
}
}
在该自定义类型中,我们添加了一个表单分组和一些子级字段。还添加了一些自定义验证器来验证子级类型的特定字段。
最后,我们可以将父级类型和子级类型组合在一起,并将其添加到 Formly 的配置中: