Created
September 4, 2015 17:06
-
-
Save anonymous/716ff7c1284b284edf2e to your computer and use it in GitHub Desktop.
Angular Formly Example // source http://jsbin.com/huvifiw
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<script src="https://cdn.rawgit.com/lodash/lodash/3.10.1/lodash.min.js"></script> | |
<!-- Twitter bootstrap --> | |
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> | |
<style> | |
.col-50 { | |
width: 50%; | |
float:left; | |
padding-right: 10px; | |
} | |
.last { | |
padding-right:0; | |
} | |
.line:after { | |
clear: both; | |
} | |
</style> | |
<!-- apiCheck is used by formly to validate its api --> | |
<script src="http://rawgit.com/kentcdodds/apiCheck.js/master/dist/api-check.js"></script> | |
<!-- This is the latest version of angular (at the time this template was created) --> | |
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script> | |
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-messages.min.js"></script> | |
<!-- This is the current state of master for formly core. --> | |
<script src="http://rawgit.com/formly-js/angular-formly/latest/dist/formly.js"></script> | |
<!-- This is the current state of master for the bootstrap templates --> | |
<script src="http://rawgit.com/formly-js/angular-formly-templates-bootstrap/master/dist/angular-formly-templates-bootstrap.js"></script> | |
<title>Angular Formly Example</title> | |
<style id="jsbin-css"> | |
body { | |
margin: 20px | |
} | |
.formly-field { | |
margin-bottom: 16px; | |
} | |
</style> | |
</head> | |
<body ng-app="formlyExample" ng-controller="MainCtrl as vm"> | |
<div> | |
<h1>angular-formly example: {{vm.exampleTitle}}</h1> | |
<div> | |
Using <code>validation.show = true</code> you can force the validation state to be set to true. | |
Set it to a non-boolean value (like <code>null</code>) to disable again. | |
</div> | |
<hr /> | |
<form ng-submit="vm.onSubmit()" novalidate> | |
<formly-form model="vm.model" fields="vm.fields" form="vm.form"> | |
<button type="submit" class="btn btn-primary submit-button">Submit</button> | |
</formly-form> | |
</form> | |
<hr /> | |
<h2>Model</h2> | |
<pre>{{vm.model | json}}</pre> | |
<h2>Fields <small>(note, functions are not shown)</small></h2> | |
<pre>{{vm.originalFields | json}}</pre> | |
<h2>Form</h2> | |
<pre>{{vm.form | json}}</pre> | |
</div> | |
<div style="margin-top:30px"> | |
<small> | |
This is an example for the | |
<a href="https://formly-js.github.io/angular-formly">angular-formly</a> | |
project made with ♥ by | |
<strong> | |
<span ng-if="!vm.author.name || !vm.author.url"> | |
{{vm.author.name || 'anonymous'}} | |
</span> | |
<a ng-if="vm.author.url" ng-href="{{::vm.author.url}}"> | |
{{vm.author.name}} | |
</a> | |
</strong> | |
<br /> | |
This example is running angular version "{{vm.env.angularVersion}}" and formly version "{{vm.env.formlyVersion}}" | |
</small> | |
</div> | |
<!-- Put custom templates here --> | |
<script id="jsbin-javascript"> | |
/* global angular */ | |
(function() { | |
'use strict'; | |
var app = angular.module('formlyExample', ['formly', 'ngMessages', 'formlyBootstrap'], function config(formlyConfigProvider) { | |
// set templates here | |
formlyConfigProvider.setType({ | |
name: 'whatever', | |
template: 'your template' | |
}); | |
formlyConfigProvider.setWrapper([ | |
{ | |
name: 'bootstrapHasError ', | |
template: [ | |
'<div class="formly-template-wrapper form-group"', | |
'ng-class="{\'has-error\': options.validation.errorExistsAndShouldBeVisible}">', | |
'<label for="{{::id}}">{{options.templateOptions.label}} {{options.templateOptions.required ? \'*\' : \'\'}}</label>', | |
'<formly-transclude></formly-transclude>', | |
'<div class="validation"', | |
'ng-if="options.validation.errorExistsAndShouldBeVisible"', | |
'ng-messages="options.formControl.$error">', | |
'<div ng-messages-include="validation.html"></div>', | |
'<div ng-message="{{::name}}" ng-repeat="(name, message) in ::options.validation.messages">', | |
'{{message(options.formControl.$viewValue, options.formControl.$modelValue, this)}}', | |
'</div>', | |
'</div>', | |
'</div>' | |
].join(' ') | |
} | |
]); | |
// we're just copying the input type so we get the wrappers and the template | |
// but here you can specify the controller and link for a type | |
var inputType = formlyConfigProvider.getType('input'); | |
formlyConfigProvider.setType(angular.extend({}, inputType, { | |
name: 'customInput', | |
controller: /*@ngInject*/ function($scope) { | |
$scope.options.templateOptions.placeholder = 'This was changed in the controller'; | |
}, | |
link: function(scope, el, attrs, ctrl) { | |
scope.options.templateOptions.label = 'This was changed in the link'; | |
} | |
})); | |
}); | |
app.run(function(formlyConfig, formlyValidationMessages) { | |
formlyConfig.extras.ngModelAttrsManipulatorPreferBound = true; | |
}); | |
app.controller('MainCtrl', function MainCtrl(formlyVersion) { | |
var vm = this; | |
// funcation assignment | |
vm.onSubmit = onSubmit; | |
// variable assignment | |
vm.author = { // optionally fill in your info below :-) | |
name: 'Kent C. Dodds', | |
url: 'https://twitter.com/kentcdodds' // a link to your twitter/github/blog/whatever | |
}; | |
vm.exampleTitle = 'Force showing error state'; // add this | |
vm.env = { | |
angularVersion: angular.version.full, | |
formlyVersion: formlyVersion | |
}; | |
vm.model = { | |
showErrorState: true, | |
errors: { | |
"BerufInhaberB1": "invalid", | |
"OeffentlicheFunktion1": "invalid" | |
} | |
}; | |
// validierung wird immer dann forciert angezeigt, wenn errorstatus = true und das feld selbst im error zustand ist | |
var validationExpression = _.template('model.showErrorState === true && model.errors.${field} === "invalid" ? true : null'); | |
vm.fields = [ | |
{ | |
"fieldGroup": [ | |
{ | |
"className": "line", | |
"fieldGroup": [ | |
{ | |
"className": "col-50", | |
"type": "customInput", | |
"key": "firstName", | |
"templateOptions": { | |
"label": "First Name" | |
} | |
}, | |
{ | |
"className": "col-50 last", | |
"type": "input", | |
"key": "lastName", | |
"templateOptions": { | |
"label": "Last Name" | |
} | |
} | |
] | |
}, | |
{ | |
"fieldGroup": [ | |
{ | |
"key": "BerufInhaberB1", | |
"type": "input", | |
"templateOptions": { | |
"label": "BerufInhaber", | |
"type": "input", | |
"addonRight": { | |
"text": "bla" | |
}, | |
onKeydown: function($viewValue, $modelValue, scope) { | |
// bei neuer Eingabe den Fehlerzustand löschen, damit ins model geschrieben werden kann | |
delete scope.model.errors.BerufInhaberB1; | |
} | |
}, | |
"defaultValue": "Dompteur", | |
"validation": { | |
"show": true | |
}, | |
"expressionProperties": { | |
'validation.show': validationExpression({'field': 'BerufInhaberB1'}) | |
}, | |
"validators": { | |
"serverResult": { | |
"expression": function(viewValue, modelValue, fieldScope) { | |
// server returniert fehler: error ist nicht undefiniert, also Fehlerzustand anzeigen | |
return fieldScope.model.errors.BerufInhaberB1 === undefined; | |
}, | |
"message": '"This field is not yet valid"' | |
} | |
} | |
}, | |
{ | |
"key": "ArbeitgeberInhaberB1", | |
"type": "input", | |
"templateOptions": { | |
"label": "ArbeitgeberInhaber", | |
"type": "text" | |
}, | |
"defaultValue": "Bank" | |
}, | |
{ | |
"key": "BruttoEinkommenInhaberFIPO1", | |
"type": "select", | |
"templateOptions": { | |
"label": "BruttoEinkommenInhaber", | |
"options": [ | |
{ | |
"name": "CHF 0 – CHF 29´999", | |
"value": "1" | |
}, | |
{ | |
"name": "CHF 30´000 – CHF 74´999", | |
"value": "2" | |
}, | |
{ | |
"name": "CHF 75´000 – CHF 149´999", | |
"value": "3" | |
}, | |
{ | |
"name": "CHF 150´000 – CHF 249´999", | |
"value": "4" | |
}, | |
{ | |
"name": "CHF 250´000 und mehr", | |
"value": "5" | |
} | |
] | |
} | |
}, | |
{ | |
"key": "OeffentlicheFunktion1", | |
"type": "radio", | |
"templateOptions": { | |
"label": "OeffentlicheFunktion", | |
"options": [ | |
{ | |
"name": "ja", | |
"value": "1" | |
}, | |
{ | |
"name": "nein", | |
"value": "0" | |
} | |
], | |
onFocus: function($viewValue, $modelValue, scope) { | |
delete scope.model.errors.OeffentlicheFunktion1; | |
} | |
}, | |
"validation": { | |
"show": true | |
}, | |
"expressionProperties": { | |
'validation.show': validationExpression({'field': 'OeffentlicheFunktion1'}) | |
}, | |
"validators": { | |
"serverResult": { | |
"expression": function(viewValue, modelValue, fieldScope) { | |
return fieldScope.model.errors.OeffentlicheFunktion1 === undefined; | |
}, | |
"message": '"This field is not yet valid"' | |
} | |
} | |
}, | |
{ | |
"key": "ArtOeffentlicheFunktion1", | |
"type": "select", | |
"templateOptions": { | |
"label": "ArtOeffentlicheFunktion", | |
"options": [ | |
{ | |
"name": "Lokal", | |
"value": "1" | |
}, | |
{ | |
"name": "Regional", | |
"value": "2" | |
}, | |
{ | |
"name": "National", | |
"value": "3" | |
}, | |
{ | |
"name": "International", | |
"value": "4" | |
} | |
] | |
}, | |
"hideExpression": "model.OeffentlicheFunktion1 != 1" | |
} | |
] | |
} | |
] | |
} | |
]; | |
vm.originalFields = angular.copy(vm.fields); | |
// function definition | |
function onSubmit() { | |
alert(JSON.stringify(vm.model), null, 2); | |
} | |
}); | |
})(); | |
</script> | |
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
<html> | |
<head> | |
<script src="https://cdn.rawgit.com/lodash/lodash/3.10.1/lodash.min.js"><\/script> | |
<\!-- Twitter bootstrap --> | |
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> | |
<style> | |
.col-50 { | |
width: 50%; | |
float:left; | |
padding-right: 10px; | |
} | |
.last { | |
padding-right:0; | |
} | |
.line:after { | |
clear: both; | |
} | |
</style> | |
<\!-- apiCheck is used by formly to validate its api --> | |
<script src="//rawgit.com/kentcdodds/apiCheck.js/master/dist/api-check.js"><\/script> | |
<\!-- This is the latest version of angular (at the time this template was created) --> | |
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"><\/script> | |
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-messages.min.js"><\/script> | |
<\!-- This is the current state of master for formly core. --> | |
<script src="//rawgit.com/formly-js/angular-formly/latest/dist/formly.js"><\/script> | |
<\!-- This is the current state of master for the bootstrap templates --> | |
<script src="//rawgit.com/formly-js/angular-formly-templates-bootstrap/master/dist/angular-formly-templates-bootstrap.js"><\/script> | |
<title>Angular Formly Example</title> | |
</head> | |
<body ng-app="formlyExample" ng-controller="MainCtrl as vm"> | |
<div> | |
<h1>angular-formly example: {{vm.exampleTitle}}</h1> | |
<div> | |
Using <code>validation.show = true</code> you can force the validation state to be set to true. | |
Set it to a non-boolean value (like <code>null</code>) to disable again. | |
</div> | |
<hr /> | |
<form ng-submit="vm.onSubmit()" novalidate> | |
<formly-form model="vm.model" fields="vm.fields" form="vm.form"> | |
<button type="submit" class="btn btn-primary submit-button">Submit</button> | |
</formly-form> | |
</form> | |
<hr /> | |
<h2>Model</h2> | |
<pre>{{vm.model | json}}</pre> | |
<h2>Fields <small>(note, functions are not shown)</small></h2> | |
<pre>{{vm.originalFields | json}}</pre> | |
<h2>Form</h2> | |
<pre>{{vm.form | json}}</pre> | |
</div> | |
<div style="margin-top:30px"> | |
<small> | |
This is an example for the | |
<a href="https://formly-js.github.io/angular-formly">angular-formly</a> | |
project made with ♥ by | |
<strong> | |
<span ng-if="!vm.author.name || !vm.author.url"> | |
{{vm.author.name || 'anonymous'}} | |
</span> | |
<a ng-if="vm.author.url" ng-href="{{::vm.author.url}}"> | |
{{vm.author.name}} | |
</a> | |
</strong> | |
<br /> | |
This example is running angular version "{{vm.env.angularVersion}}" and formly version "{{vm.env.formlyVersion}}" | |
</small> | |
</div> | |
<\!-- Put custom templates here --> | |
</body> | |
</html> | |
</script> | |
<script id="jsbin-source-css" type="text/css">body { | |
margin: 20px | |
} | |
.formly-field { | |
margin-bottom: 16px; | |
}</script> | |
<script id="jsbin-source-javascript" type="text/javascript">/* global angular */ | |
(function() { | |
'use strict'; | |
var app = angular.module('formlyExample', ['formly', 'ngMessages', 'formlyBootstrap'], function config(formlyConfigProvider) { | |
// set templates here | |
formlyConfigProvider.setType({ | |
name: 'whatever', | |
template: 'your template' | |
}); | |
formlyConfigProvider.setWrapper([ | |
{ | |
name: 'bootstrapHasError ', | |
template: [ | |
'<div class="formly-template-wrapper form-group"', | |
'ng-class="{\'has-error\': options.validation.errorExistsAndShouldBeVisible}">', | |
'<label for="{{::id}}">{{options.templateOptions.label}} {{options.templateOptions.required ? \'*\' : \'\'}}</label>', | |
'<formly-transclude></formly-transclude>', | |
'<div class="validation"', | |
'ng-if="options.validation.errorExistsAndShouldBeVisible"', | |
'ng-messages="options.formControl.$error">', | |
'<div ng-messages-include="validation.html"></div>', | |
'<div ng-message="{{::name}}" ng-repeat="(name, message) in ::options.validation.messages">', | |
'{{message(options.formControl.$viewValue, options.formControl.$modelValue, this)}}', | |
'</div>', | |
'</div>', | |
'</div>' | |
].join(' ') | |
} | |
]); | |
// we're just copying the input type so we get the wrappers and the template | |
// but here you can specify the controller and link for a type | |
var inputType = formlyConfigProvider.getType('input'); | |
formlyConfigProvider.setType(angular.extend({}, inputType, { | |
name: 'customInput', | |
controller: /*@ngInject*/ function($scope) { | |
$scope.options.templateOptions.placeholder = 'This was changed in the controller'; | |
}, | |
link: function(scope, el, attrs, ctrl) { | |
scope.options.templateOptions.label = 'This was changed in the link'; | |
} | |
})); | |
}); | |
app.run(function(formlyConfig, formlyValidationMessages) { | |
formlyConfig.extras.ngModelAttrsManipulatorPreferBound = true; | |
}); | |
app.controller('MainCtrl', function MainCtrl(formlyVersion) { | |
var vm = this; | |
// funcation assignment | |
vm.onSubmit = onSubmit; | |
// variable assignment | |
vm.author = { // optionally fill in your info below :-) | |
name: 'Kent C. Dodds', | |
url: 'https://twitter.com/kentcdodds' // a link to your twitter/github/blog/whatever | |
}; | |
vm.exampleTitle = 'Force showing error state'; // add this | |
vm.env = { | |
angularVersion: angular.version.full, | |
formlyVersion: formlyVersion | |
}; | |
vm.model = { | |
showErrorState: true, | |
errors: { | |
"BerufInhaberB1": "invalid", | |
"OeffentlicheFunktion1": "invalid" | |
} | |
}; | |
// validierung wird immer dann forciert angezeigt, wenn errorstatus = true und das feld selbst im error zustand ist | |
var validationExpression = _.template('model.showErrorState === true && model.errors.${field} === "invalid" ? true : null'); | |
vm.fields = [ | |
{ | |
"fieldGroup": [ | |
{ | |
"className": "line", | |
"fieldGroup": [ | |
{ | |
"className": "col-50", | |
"type": "customInput", | |
"key": "firstName", | |
"templateOptions": { | |
"label": "First Name" | |
} | |
}, | |
{ | |
"className": "col-50 last", | |
"type": "input", | |
"key": "lastName", | |
"templateOptions": { | |
"label": "Last Name" | |
} | |
} | |
] | |
}, | |
{ | |
"fieldGroup": [ | |
{ | |
"key": "BerufInhaberB1", | |
"type": "input", | |
"templateOptions": { | |
"label": "BerufInhaber", | |
"type": "input", | |
"addonRight": { | |
"text": "bla" | |
}, | |
onKeydown: function($viewValue, $modelValue, scope) { | |
// bei neuer Eingabe den Fehlerzustand löschen, damit ins model geschrieben werden kann | |
delete scope.model.errors.BerufInhaberB1; | |
} | |
}, | |
"defaultValue": "Dompteur", | |
"validation": { | |
"show": true | |
}, | |
"expressionProperties": { | |
'validation.show': validationExpression({'field': 'BerufInhaberB1'}) | |
}, | |
"validators": { | |
"serverResult": { | |
"expression": function(viewValue, modelValue, fieldScope) { | |
// server returniert fehler: error ist nicht undefiniert, also Fehlerzustand anzeigen | |
return fieldScope.model.errors.BerufInhaberB1 === undefined; | |
}, | |
"message": '"This field is not yet valid"' | |
} | |
} | |
}, | |
{ | |
"key": "ArbeitgeberInhaberB1", | |
"type": "input", | |
"templateOptions": { | |
"label": "ArbeitgeberInhaber", | |
"type": "text" | |
}, | |
"defaultValue": "Bank" | |
}, | |
{ | |
"key": "BruttoEinkommenInhaberFIPO1", | |
"type": "select", | |
"templateOptions": { | |
"label": "BruttoEinkommenInhaber", | |
"options": [ | |
{ | |
"name": "CHF 0 – CHF 29´999", | |
"value": "1" | |
}, | |
{ | |
"name": "CHF 30´000 – CHF 74´999", | |
"value": "2" | |
}, | |
{ | |
"name": "CHF 75´000 – CHF 149´999", | |
"value": "3" | |
}, | |
{ | |
"name": "CHF 150´000 – CHF 249´999", | |
"value": "4" | |
}, | |
{ | |
"name": "CHF 250´000 und mehr", | |
"value": "5" | |
} | |
] | |
} | |
}, | |
{ | |
"key": "OeffentlicheFunktion1", | |
"type": "radio", | |
"templateOptions": { | |
"label": "OeffentlicheFunktion", | |
"options": [ | |
{ | |
"name": "ja", | |
"value": "1" | |
}, | |
{ | |
"name": "nein", | |
"value": "0" | |
} | |
], | |
onFocus: function($viewValue, $modelValue, scope) { | |
delete scope.model.errors.OeffentlicheFunktion1; | |
} | |
}, | |
"validation": { | |
"show": true | |
}, | |
"expressionProperties": { | |
'validation.show': validationExpression({'field': 'OeffentlicheFunktion1'}) | |
}, | |
"validators": { | |
"serverResult": { | |
"expression": function(viewValue, modelValue, fieldScope) { | |
return fieldScope.model.errors.OeffentlicheFunktion1 === undefined; | |
}, | |
"message": '"This field is not yet valid"' | |
} | |
} | |
}, | |
{ | |
"key": "ArtOeffentlicheFunktion1", | |
"type": "select", | |
"templateOptions": { | |
"label": "ArtOeffentlicheFunktion", | |
"options": [ | |
{ | |
"name": "Lokal", | |
"value": "1" | |
}, | |
{ | |
"name": "Regional", | |
"value": "2" | |
}, | |
{ | |
"name": "National", | |
"value": "3" | |
}, | |
{ | |
"name": "International", | |
"value": "4" | |
} | |
] | |
}, | |
"hideExpression": "model.OeffentlicheFunktion1 != 1" | |
} | |
] | |
} | |
] | |
} | |
]; | |
vm.originalFields = angular.copy(vm.fields); | |
// function definition | |
function onSubmit() { | |
alert(JSON.stringify(vm.model), null, 2); | |
} | |
}); | |
})();</script></body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
margin: 20px | |
} | |
.formly-field { | |
margin-bottom: 16px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* global angular */ | |
(function() { | |
'use strict'; | |
var app = angular.module('formlyExample', ['formly', 'ngMessages', 'formlyBootstrap'], function config(formlyConfigProvider) { | |
// set templates here | |
formlyConfigProvider.setType({ | |
name: 'whatever', | |
template: 'your template' | |
}); | |
formlyConfigProvider.setWrapper([ | |
{ | |
name: 'bootstrapHasError ', | |
template: [ | |
'<div class="formly-template-wrapper form-group"', | |
'ng-class="{\'has-error\': options.validation.errorExistsAndShouldBeVisible}">', | |
'<label for="{{::id}}">{{options.templateOptions.label}} {{options.templateOptions.required ? \'*\' : \'\'}}</label>', | |
'<formly-transclude></formly-transclude>', | |
'<div class="validation"', | |
'ng-if="options.validation.errorExistsAndShouldBeVisible"', | |
'ng-messages="options.formControl.$error">', | |
'<div ng-messages-include="validation.html"></div>', | |
'<div ng-message="{{::name}}" ng-repeat="(name, message) in ::options.validation.messages">', | |
'{{message(options.formControl.$viewValue, options.formControl.$modelValue, this)}}', | |
'</div>', | |
'</div>', | |
'</div>' | |
].join(' ') | |
} | |
]); | |
// we're just copying the input type so we get the wrappers and the template | |
// but here you can specify the controller and link for a type | |
var inputType = formlyConfigProvider.getType('input'); | |
formlyConfigProvider.setType(angular.extend({}, inputType, { | |
name: 'customInput', | |
controller: /*@ngInject*/ function($scope) { | |
$scope.options.templateOptions.placeholder = 'This was changed in the controller'; | |
}, | |
link: function(scope, el, attrs, ctrl) { | |
scope.options.templateOptions.label = 'This was changed in the link'; | |
} | |
})); | |
}); | |
app.run(function(formlyConfig, formlyValidationMessages) { | |
formlyConfig.extras.ngModelAttrsManipulatorPreferBound = true; | |
}); | |
app.controller('MainCtrl', function MainCtrl(formlyVersion) { | |
var vm = this; | |
// funcation assignment | |
vm.onSubmit = onSubmit; | |
// variable assignment | |
vm.author = { // optionally fill in your info below :-) | |
name: 'Kent C. Dodds', | |
url: 'https://twitter.com/kentcdodds' // a link to your twitter/github/blog/whatever | |
}; | |
vm.exampleTitle = 'Force showing error state'; // add this | |
vm.env = { | |
angularVersion: angular.version.full, | |
formlyVersion: formlyVersion | |
}; | |
vm.model = { | |
showErrorState: true, | |
errors: { | |
"BerufInhaberB1": "invalid", | |
"OeffentlicheFunktion1": "invalid" | |
} | |
}; | |
// validierung wird immer dann forciert angezeigt, wenn errorstatus = true und das feld selbst im error zustand ist | |
var validationExpression = _.template('model.showErrorState === true && model.errors.${field} === "invalid" ? true : null'); | |
vm.fields = [ | |
{ | |
"fieldGroup": [ | |
{ | |
"className": "line", | |
"fieldGroup": [ | |
{ | |
"className": "col-50", | |
"type": "customInput", | |
"key": "firstName", | |
"templateOptions": { | |
"label": "First Name" | |
} | |
}, | |
{ | |
"className": "col-50 last", | |
"type": "input", | |
"key": "lastName", | |
"templateOptions": { | |
"label": "Last Name" | |
} | |
} | |
] | |
}, | |
{ | |
"fieldGroup": [ | |
{ | |
"key": "BerufInhaberB1", | |
"type": "input", | |
"templateOptions": { | |
"label": "BerufInhaber", | |
"type": "input", | |
"addonRight": { | |
"text": "bla" | |
}, | |
onKeydown: function($viewValue, $modelValue, scope) { | |
// bei neuer Eingabe den Fehlerzustand löschen, damit ins model geschrieben werden kann | |
delete scope.model.errors.BerufInhaberB1; | |
} | |
}, | |
"defaultValue": "Dompteur", | |
"validation": { | |
"show": true | |
}, | |
"expressionProperties": { | |
'validation.show': validationExpression({'field': 'BerufInhaberB1'}) | |
}, | |
"validators": { | |
"serverResult": { | |
"expression": function(viewValue, modelValue, fieldScope) { | |
// server returniert fehler: error ist nicht undefiniert, also Fehlerzustand anzeigen | |
return fieldScope.model.errors.BerufInhaberB1 === undefined; | |
}, | |
"message": '"This field is not yet valid"' | |
} | |
} | |
}, | |
{ | |
"key": "ArbeitgeberInhaberB1", | |
"type": "input", | |
"templateOptions": { | |
"label": "ArbeitgeberInhaber", | |
"type": "text" | |
}, | |
"defaultValue": "Bank" | |
}, | |
{ | |
"key": "BruttoEinkommenInhaberFIPO1", | |
"type": "select", | |
"templateOptions": { | |
"label": "BruttoEinkommenInhaber", | |
"options": [ | |
{ | |
"name": "CHF 0 – CHF 29´999", | |
"value": "1" | |
}, | |
{ | |
"name": "CHF 30´000 – CHF 74´999", | |
"value": "2" | |
}, | |
{ | |
"name": "CHF 75´000 – CHF 149´999", | |
"value": "3" | |
}, | |
{ | |
"name": "CHF 150´000 – CHF 249´999", | |
"value": "4" | |
}, | |
{ | |
"name": "CHF 250´000 und mehr", | |
"value": "5" | |
} | |
] | |
} | |
}, | |
{ | |
"key": "OeffentlicheFunktion1", | |
"type": "radio", | |
"templateOptions": { | |
"label": "OeffentlicheFunktion", | |
"options": [ | |
{ | |
"name": "ja", | |
"value": "1" | |
}, | |
{ | |
"name": "nein", | |
"value": "0" | |
} | |
], | |
onFocus: function($viewValue, $modelValue, scope) { | |
delete scope.model.errors.OeffentlicheFunktion1; | |
} | |
}, | |
"validation": { | |
"show": true | |
}, | |
"expressionProperties": { | |
'validation.show': validationExpression({'field': 'OeffentlicheFunktion1'}) | |
}, | |
"validators": { | |
"serverResult": { | |
"expression": function(viewValue, modelValue, fieldScope) { | |
return fieldScope.model.errors.OeffentlicheFunktion1 === undefined; | |
}, | |
"message": '"This field is not yet valid"' | |
} | |
} | |
}, | |
{ | |
"key": "ArtOeffentlicheFunktion1", | |
"type": "select", | |
"templateOptions": { | |
"label": "ArtOeffentlicheFunktion", | |
"options": [ | |
{ | |
"name": "Lokal", | |
"value": "1" | |
}, | |
{ | |
"name": "Regional", | |
"value": "2" | |
}, | |
{ | |
"name": "National", | |
"value": "3" | |
}, | |
{ | |
"name": "International", | |
"value": "4" | |
} | |
] | |
}, | |
"hideExpression": "model.OeffentlicheFunktion1 != 1" | |
} | |
] | |
} | |
] | |
} | |
]; | |
vm.originalFields = angular.copy(vm.fields); | |
// function definition | |
function onSubmit() { | |
alert(JSON.stringify(vm.model), null, 2); | |
} | |
}); | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment