angular-formly example: Codementor
Model
{}
Fields (note, functions are not shown)
[
{
"key": "firstName",
"type": "customInput",
"templateOptions": {
"required": true,
"label": "First Name",
"foo": "hi"
}
},
{
"key": "lastName",
"type": "input",
"templateOptions": {
"label": "Last Name"
},
"expressionProperties": {
"templateOptions.disabled": "!model.firstName"
}
},
{
"key": "knowIpAddress",
"type": "checkbox",
"templateOptions": {
"label": "I know what an IP address is..."
}
},
{
"key": "ipAddress",
"type": "input",
"templateOptions": {
"label": "IP Address",
"placeholder": "127.0.0.1"
},
"hideExpression": "!model.knowIpAddress",
"validators": {
"ipAddress": {
"message": "$viewValue + \" is not a valid IP Address\""
}
}
}
]
Form
{
"$error": {
"required": [
{
"$validators": {},
"$asyncValidators": {},
"$parsers": [],
"$formatters": [
null
],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": false,
"$invalid": true,
"$error": {
"required": true
},
"$name": "formly_1_customInput_firstName_0",
"$options": null
}
]
},
"$name": "formly_1",
"$dirty": false,
"$pristine": true,
"$valid": false,
"$invalid": true,
"$submitted": false,
"formly_1_checkbox_knowIpAddress_2": {
"$viewValue": false,
"$validators": {},
"$asyncValidators": {},
"$parsers": [
null
],
"$formatters": [
null
],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": true,
"$invalid": false,
"$error": {},
"$name": "formly_1_checkbox_knowIpAddress_2",
"$options": null
},
"formly_1_customInput_firstName_0": {
"$validators": {},
"$asyncValidators": {},
"$parsers": [],
"$formatters": [
null
],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": false,
"$invalid": true,
"$error": {
"required": true
},
"$name": "formly_1_customInput_firstName_0",
"$options": null
},
"formly_1_input_lastName_1": {
"$validators": {},
"$asyncValidators": {},
"$parsers": [],
"$formatters": [
null
],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": true,
"$invalid": false,
"$error": {},
"$name": "formly_1_input_lastName_1",
"$options": null
}
}