ng-dynamic-forms实践篇（下）
我们接着上篇，先把小目标中的所有字段都定义出来
这部分就是苦力活儿了，把KendoUiComponent中的formModel完善即可：
1 formModel: DynamicFormControlModel[] = [
2 new DynamicInputModel({
3 id: ‘firstName‘,
4 label: ‘姓名‘,
5 placeholder: ‘请输入用户姓名‘
6 }),
7 new DynamicRadioGroupModel({
8 id: ‘sex‘,
9 legend: ‘性别‘,
10 options: [
11 {
12 label: ‘男‘,
13 value: ‘M‘
14 },
15 {
16 label: ‘女‘,
17 value: ‘F‘
18 }
19 ]
20 }),
21 new DynamicInputModel({
22 id: ‘age‘,
23 inputType: ‘number‘,
24 label: ‘年龄‘,
25 placeholder: ‘请输入用户年龄‘,
26 min: 0,
27 max: 150,
28 step: 1,
29 value: 18
30 }),
31 new DynamicDatePickerModel({
32 id: ‘birthday-date‘,
33 inline: false,
34 label: ‘出生日期‘,
35 placeholder: ‘请选择出生日期‘
36 }),
37 new DynamicTimePickerModel({
38 id: ‘birthday-time‘,
39 label: ‘出生时分‘,
40 format: ‘HH:mm‘
41 }),
42 new DynamicInputModel({
43 id: ‘password‘,
44 inputType: ‘password‘,
45 label: ‘密码‘,
46 placeholder: ‘请输入用户密码‘
47 }),
48 new DynamicInputModel({
49 id: ‘password-confirm‘,
50 inputType: ‘password‘,
51 label: ‘确认密码‘,
52 placeholder: ‘请再次输入用户密码‘
53 }),
54 new DynamicSelectModel({
55 id: ‘education‘,
56 label: ‘学历‘,
57 options: [
58 {
59 label: ‘大学‘,
60 value: ‘university‘
61 },
62 {
63 label: ‘高中‘,
64 value: ‘high-school‘
65 },
66 {
67 label: ‘初中‘,
68 value: ‘junior-school‘
69 },
70 ]
71 }),
72 new DynamicCheckboxGroupModel({
73 id: ‘favorite‘,
74 legend: ‘兴趣爱好‘,
75 group: [
76 new DynamicCheckboxModel({
77 id: ‘play-games‘,
78 label: ‘打游戏‘
79 }),
80 new DynamicCheckboxModel({
81 id: ‘coding‘,
82 label: ‘写代码‘
83 }),
84 new DynamicCheckboxModel({
85 id: ‘running‘,
86 label: ‘跑步‘
87 }),
88 ]
89 }),
90 new DynamicTextAreaModel({
91 id: ‘remark‘,
92 label: ‘备注‘,
93 rows: 10
94 }),
95 new DynamicFileUploadModel({
96 autoUpload: true,
97 id: ‘attachments‘,
98 label: ‘Attachments‘,
99 multiple: true,
100 removeUrl: ‘removeUrl‘,
101 url: ‘saveUrl‘
102 }),
103 new DynamicFileUploadModel(
104 {
105 id: ‘head-photo‘,
106 label: ‘头像‘,
107 accept: ‘*.*‘,
108 autoUpload: true,
109 multiple: true,
110 removeUrl: ‘removeUrl‘,
111 url: ‘http://localhost:60155/api/file/upload‘
112 }
113 )
114 ];
formModel
这里的各种控件模型的初始化，可以查看DynamicXXXXModel的属性定义， 也可以参考官方github里面的examples：https://github.com/udos86/ng-dynamic-forms/blob/master/sample/app/ui-kendo/kendo-sample-form.model.ts。
接下来，我们再尝试加一下验证相关的代码：
验证分两类，一类是系统内置的验证，比如非空验证、最大长度、最大值、正则表达式之类的，另外一类是自定义的验证逻辑，下面我们分别来看看怎么用吧~
系统内置验证
这个用起来比较简单，直接在模型上加上validators属性和errorMessages属性即可,如下代码：
new DynamicInputModel({
id: ‘firstName‘,
label: ‘姓名‘,
placeholder: ‘请输入用户姓名‘,
validators: {
required: null,
maxLength: 15
},
errorMessages: {
required: ‘{{label}}不能为空‘,
maxLength: ‘{{label}}不能超过15个字符‘
}
})
其中validators中定义了你需要做哪些验证，以及这些验证方法需要传递的参数是什么。errorMessages中定义了当错误发生时的错误消息。最终效果如下：
自定义验证
有时候，系统验证不完全能满足我们的需求，此时需要自己定义一些验证的方法。比如，我们需要在用户注册时，检查用户两次输入的密码是否一致。
在使用时，首先我们需要定义一个验证的方法，代码如下，该方法中，会将password和password-confirm从表单中取出，并获得value，如果他们两个的Value不一致，则返回对象：{customMatchPasswordValidator: true}
import {AbstractControl, FormGroup, ValidationErrors} from ‘@angular/forms‘;
export function customMatchPasswordValidator(group: FormGroup): ValidationErrors | null {
console.log(group);
console.log(group.get(‘password‘));
const password = group.get(‘password‘).value,
passWordConfirm = group.get(‘password-confirm‘).value;
const hasError = password != passWordConfirm;
return hasError ? {customMatchPasswordValidator: true} : null;
}
然后在app.modules.ts中导入它：
import {customMatchPasswordValidator} from ‘./kendo-ui/password-validation‘;
还需要在app.modules.ts的providers中注入：
providers: [
{
provide: NG_VALIDATORS,
useValue: customMatchPasswordValidator,
multi: true
},
{
provide: DYNAMIC_VALIDATORS,
useValue: new Map<string, Validator | ValidatorFactory>([
[‘customMatchPasswordValidator‘, customMatchPasswordValidator]
])
}
]
由于是要同时获取两个控件的值，所以需要将两个密码框的模型放到一个DynamicFormGroupModel中，并且我们的验证也需要加到DynamicFormGroupModel中，代码如下：
new DynamicFormGroupModel({
id: ‘password-group‘,
group: [
new DynamicInputModel({
id: ‘password‘,
inputType: ‘password‘,
label: ‘密码‘,
placeholder: ‘请输入用户密码‘
}),
new DynamicInputModel({
id: ‘password-confirm‘,
inputType: ‘password‘,
label: ‘确认密码‘,
placeholder: ‘请再次输入用户密码‘
})
],
validators: {
customMatchPasswordValidator: null
},
errorMessages: {
customMatchPasswordValidator: ‘密码输入不不匹配‘
}
})
这样，我们就可以完成密码的校验了，效果如下：
截止这里，小目标中的其他组件也都类似，这里就不一一例举了
原文地址：https://www.cnblogs.com/baiyunchen/p/8489485.html