angular-formly example: Advanced Layout
This is an example of using formGroup
s and the className
property to have an advanced layout.
Model
{}
Fields (note, functions are not shown)
[
{
"type": "input",
"key": "profile.name.firstname",
"templateOptions": {
"label": "First Name",
"placeholder": "Enter your First Name"
}
},
{
"type": "input",
"key": "profile.name.lastname",
"templateOptions": {
"label": "Last Name",
"placeholder": "Enter your First Name"
}
}
]
Form
{
"$error": {},
"$name": "formly_1",
"$dirty": false,
"$pristine": true,
"$valid": true,
"$invalid": false,
"$submitted": false,
"$editables": [],
"$visible": false,
"$waiting": false,
"$data": {},
"_clicked": false,
"_blur": "ignore",
"formly_1_input_profile.name.firstname_0": {
"$validators": {},
"$asyncValidators": {},
"$parsers": [],
"$formatters": [
null
],
"$viewChangeListeners": [],
"$untouched": true,
"$touched": false,
"$pristine": true,
"$dirty": false,
"$valid": true,
"$invalid": false,
"$error": {},
"$name": "formly_1_input_profile.name.firstname_0",
"$options": null
},
"formly_1_input_profile.name.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_profile.name.lastname_1",
"$options": null
}
}