JSFiddle - React, Tailwind, and code Playground

by brian428

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.css">
<script src="https://rawgit.com/kentcdodds/apiCheck.js/master/dist/api-check.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-animate.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-messages.js"></script>
<script src="https://rawgit.com/formly-js/angular-formly/master/dist/formly.js"></script>
<script src="https://rawgit.com/formly-js/angular-formly-templates-bootstrap/master/dist/angular-formly-templates-bootstrap.js"></script>

  <body ng-app="formlyExample" ng-controller="MainCtrl as vm">
    <div>
      <h1>angular-formly example: {{vm.exampleTitle}}</h1>
      <div>
        This is an example I created for <a href="https://youtu.be/FvIj5n7dF2Y">this hangout on air</a> with
        <a href="https://www.codementor.io/">Codementor.io</a> office hours. It demonstrates several features of angular-formly.
      </div>
      <hr />
      <form ng-submit="vm.onSubmit()" novalidate>
        <formly-form model="vm.model" fields="vm.fields" form="vm.form" options="vm.options">
          <button type="submit" class="btn btn-primary submit-button">Submit</button>
          <button type="button" class="btn btn-default submit-button" ng-click="vm.options.resetModel()">Reset</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...

JavaScript

/* global angular */
(function() {
  
  'use strict';

  var app = angular.module('formlyExample', [
    'formly', 'formlyBootstrap'
  ]);
  
  app.run(function(formlyConfig, formlyValidationMessages, formlyApiCheck) {
    formlyConfig.setWrapper({
      name: 'validation',
      types: ['input', 'customInput'],
      templateUrl: 'my-messages.html'
    });
    
    formlyValidationMessages.addStringMessage('required', 'This field is required');
    
    formlyConfig.setType({
      name: 'customInput',
      extends: 'input',
      apiCheck: {
        templateOptions: formlyApiCheck.shape({
          foo: formlyApiCheck.string.optional
        })
      }
    });
  });
  

  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 = 'Codementor'; // add this
    vm.env = {
      angularVersion: angular.version.full,
      formlyVersion: formlyVersion
    };

    vm.model = {};
    vm.options = {};
    
    vm.fields = [
      {
        key: 'firstName',
        type: 'customInput',
        templateOptions: {
          required: true,
          label: 'First Name',
          foo: 'hi'
        }
      },
      {
        key: 'lastName',
        type: 'input',
        templateOptions: {
          label: 'Last Name'
        },
        expressionProperties: {
          'templateOptions.disabled': '!model.firstName'
        }
      },
      {
        key: 'knowIpAddress',
        type: 'checkbox',
        templateOptions: {
          label: 'I know what an IP address is...'
        }
      },
      {
        key: 'ipAddress',
        type: 'input',
        templateOptions: {
          label: 'IP Address',
          placeholder: '127.0.0.1'
        },
       ...