我正在创建Angular包含响应式表单的应用．我还有一个json模式该表单应该处理的文件，包括作为表单字段的属性和作为表单验证(简单验证和交叉验证)的规则。
JSON模式:需要A和C，如果A2只需要B
{
"$schema": "...",
"$id": "...",
...
"properties": {
"A": {
"description": "..."
"type": "string"
"enum": [
"A1",
"A2",
"A3"
]
},
"B": {
"description": "..."
"type": "string"
"enum": [
"B1",
"B2",
"B3"
]
},
"C": {
"description": "..."
"type": "string"
"enum": [
"C1",
"C2",
"C3"
]
},
},
"required": [
"A",
"C"
],
"allOf": [
{
"if": {
"properties": {
"A": {
"const": "A2"
}
}
},
"then": {
"required": [
"B"
]
}
}
]
}
角form.component.ts
...
myForm = new FormGroup(
{
'A': new FormControl('', Validators.required),
'B': new FormControl('', ),
'C': new FormControl('', Validators.required)
},
{
validators: [myFirstValidator]
}
);
cross-val.ts
import { ValidationErrors, ValidatorFn, FormGroup, AbstractControl } from "@angular/forms";
export const myFirstValidator: ValidatorFn =
(formGroupControl: AbstractControl): ValidationErrors | null => {
const A = formGroupControl.get('A')
const B = formGroupControl.get('B')
if ( A!.value == "A2" && B!.value === "") {
return { Brequired: true }
}
return null
};
是否有一种方法可以使用json模式自动创建响应式表单?至少，是否有一种方法可以从json模式创建交叉验证文件?
是的，但这并不简单。
步骤0:创建一个可以轻松解析的模式
您已经这样做了，尽管您可能需要在完成后调整它以方便使用。
步骤1:创建自定义验证器工厂
首先，您必须为您希望能够通过JSON设置的每个验证器创建工厂。这些工厂必须接受验证器应该检查的值。
例如，如果你想使用angular的Validators.maxLength，你必须创建这样的东西:export const maxLengthValidatorFactory = validation => Validators.maxLength(validation.value);
完成后，您必须以一种通用函数可以轻松访问的方式对所有验证器进行分组。这将给您留下这样的内容:
export const VALIDATOR_FACTORIES = {
maxLength: maxLengthValidatorFactory,
...
};
// for better typing
export declare type ValidatorKey = keyof typeof VALIDATOR_FACTORIES;
步骤2:创建将JSON解析为Validators
的功能使用angular的Validators.compose()函数。在这里，您可以使用JSON中定义的验证并将它们映射到步骤1中创建的验证器工厂.
您可以使用上面定义的VALIDATOR_FACTORIES的数组访问器在其中创建验证器函数。
步骤3:创建表单控件现在你已经用Angular可以使用的方式解析了你的验证器函数，你可以开始创建你的FormControls了。为此，您可以简单地使用new FormControl()函数并将解析后的验证器作为参数传递给它。
步骤4:创建表单组
最后你可以把你刚刚创建的所有FormControls放到FromGroup中。如果你想以特定的方式命名它们，你可以通过迭代JSON来创建属于FormControls的键来再次创建它。
步骤5:创建HTML输入现在您已经设置了表单组，您可以再次遍历JSON以创建合适的HTML输入元素。
然后将创建的FormGroup设置在它们的<form>上，并使用您已经在FormGroup中使用的控件的名称，您将所有内容链接起来。