/index.html

## index.html
<!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: 'bootstrapLabel',
        template: [
          '<div class="formly-template-wrapper form-group"',
          'ng-class="{\'has-error\': options.validation.errorExistsAndShouldBeVisible}">',
          '<label for="{{::id}}" class="control-label">{{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 /* zeige die validierung per default */
            },
            "expressionProperties": {
              'validation.show': validationExpression({'field': 'BerufInhaberB1'}) /* dynamisch validierung triggern auf ja oder nein */
            },
            "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: 'bootstrapLabel',
        template: [
          '<div class="formly-template-wrapper form-group"',
          'ng-class="{\'has-error\': options.validation.errorExistsAndShouldBeVisible}">',
          '<label for="{{::id}}" class="control-label">{{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 /* zeige die validierung per default */
            },
            "expressionProperties": {
              'validation.show': validationExpression({'field': 'BerufInhaberB1'}) /* dynamisch validierung triggern auf ja oder nein */
            },
            "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>

## jsbin.huvifiw.css
body {
  margin: 20px
}

.formly-field {
  margin-bottom: 16px;
}

## jsbin.huvifiw.js
/* 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: 'bootstrapLabel',
        template: [
          '<div class="formly-template-wrapper form-group"',
          'ng-class="{\'has-error\': options.validation.errorExistsAndShouldBeVisible}">',
          '<label for="{{::id}}" class="control-label">{{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 /* zeige die validierung per default */
            },
            "expressionProperties": {
              'validation.show': validationExpression({'field': 'BerufInhaberB1'}) /* dynamisch validierung triggern auf ja oder nein */
            },
            "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);
    }
  });

})();
	<!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: 'bootstrapLabel',
	template: [
	'<div class="formly-template-wrapper form-group"',
	'ng-class="{\'has-error\': options.validation.errorExistsAndShouldBeVisible}">',
	'<label for="{{::id}}" class="control-label">{{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 /* zeige die validierung per default */
	},
	"expressionProperties": {
	'validation.show': validationExpression({'field': 'BerufInhaberB1'}) /* dynamisch validierung triggern auf ja oder nein */
	},
	"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: 'bootstrapLabel',
	template: [
	'<div class="formly-template-wrapper form-group"',
	'ng-class="{\'has-error\': options.validation.errorExistsAndShouldBeVisible}">',
	'<label for="{{::id}}" class="control-label">{{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 /* zeige die validierung per default */
	},
	"expressionProperties": {
	'validation.show': validationExpression({'field': 'BerufInhaberB1'}) /* dynamisch validierung triggern auf ja oder nein */
	},
	"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>