Created
September 4, 2015 13:14
-
-
Save anonymous/5c8243fef9ba268a5958 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> | |
<!-- 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(' ') | |
} | |
]); | |
}); | |
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" | |
} | |
}; | |
vm.fields = [ | |
{ | |
"fieldGroup": [ | |
{ | |
"className": "line", | |
"fieldGroup": [ | |
{ | |
"className": "col-50", | |
"type": "input", | |
"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) { | |
delete scope.model.errors.BerufInhaberB1; | |
} | |
}, | |
"defaultValue": "Dompteur", | |
"validation": { | |
"show": true | |
}, | |
"expressionProperties": { | |
'validation.show': 'model.showErrorState === true && model.errors.BerufInhaberB1 === "invalid" ? true : null' | |
}, | |
"validators": { | |
"serverResult": { | |
"expression": function(viewValue, modelValue, fieldScope) { | |
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': 'model.showErrorState === true && model.errors.OeffentlicheFunktion1 === "invalid" ? true : null' | |
}, | |
"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> | |
<\!-- 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(' ') | |
} | |
]); | |
}); | |
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" | |
} | |
}; | |
vm.fields = [ | |
{ | |
"fieldGroup": [ | |
{ | |
"className": "line", | |
"fieldGroup": [ | |
{ | |
"className": "col-50", | |
"type": "input", | |
"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) { | |
delete scope.model.errors.BerufInhaberB1; | |
} | |
}, | |
"defaultValue": "Dompteur", | |
"validation": { | |
"show": true | |
}, | |
"expressionProperties": { | |
'validation.show': 'model.showErrorState === true && model.errors.BerufInhaberB1 === "invalid" ? true : null' | |
}, | |
"validators": { | |
"serverResult": { | |
"expression": function(viewValue, modelValue, fieldScope) { | |
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': 'model.showErrorState === true && model.errors.OeffentlicheFunktion1 === "invalid" ? true : null' | |
}, | |
"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(' ') | |
} | |
]); | |
}); | |
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" | |
} | |
}; | |
vm.fields = [ | |
{ | |
"fieldGroup": [ | |
{ | |
"className": "line", | |
"fieldGroup": [ | |
{ | |
"className": "col-50", | |
"type": "input", | |
"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) { | |
delete scope.model.errors.BerufInhaberB1; | |
} | |
}, | |
"defaultValue": "Dompteur", | |
"validation": { | |
"show": true | |
}, | |
"expressionProperties": { | |
'validation.show': 'model.showErrorState === true && model.errors.BerufInhaberB1 === "invalid" ? true : null' | |
}, | |
"validators": { | |
"serverResult": { | |
"expression": function(viewValue, modelValue, fieldScope) { | |
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': 'model.showErrorState === true && model.errors.OeffentlicheFunktion1 === "invalid" ? true : null' | |
}, | |
"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