angular2-json-schema-form/src/playground/playground.component.html

Angular 2 JSON Schema Form builder

<div class="navbar navbar-inverse" style="border-radius: 0 !important;">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="/">Angular 2 JSON Schema Form — Playground</a>
      </div>
    </div>
</div>
<div class="container-fluid">

  <div class="text row">
    <div class="col-sm-12">
      An Angular 2 <a href="http://json-schema.org/">JSON Schema</a> Form builder,
      similar to, and mostly API compatible with,
      <!-- JSON Schema Form's Angular Schema Form -->
      <!-- https://github.com/json-schema-form -->
      <!-- http://schemaform.io -->
      <a href="http://schemaform.io/examples/bootstrap-example.html">Angular Schema Form</a>.
      <span style="white-space: nowrap;">
        <!-- Mozilla's React JSON Schema Form -->
        <!-- https://github.com/mozilla-services/react-jsonschema-form -->
        <a href="https://mozilla-services.github.io/react-jsonschema-form/">React JSON Schema Form</a>,
        and
        <!-- Joshfire's JSON Form -->
        <!-- http://factory.joshfire.com/ -->
        <!-- http://github.com/joshfire/jsonform/wiki -->
        <a href="http://ulion.github.io/jsonform/playground/">JSON Form</a>,
      </span>
    </div>
  </div>

  <div class="text row">
    <div class="col-sm-12">
      Choose an example below, or create your own, and check the generated form.
    </div>
  </div>

  <div class="form-group">
    <div class="row">
      <div class="col-sm-2">
        <label for="exampleSet">Example Set:</label>
      </div>
      <div class="col-sm-6">
        <select id="exampleSet" class="form-control"
          (change)="loadSelectedSet($event.target.value)">
          <option *ngFor="let set of examples.exampleSetList"
            [value]="set"
            [selected]="selectedSet === set">
            {{examples.exampleSets[set]}}
          </option>
        </select>
      </div>
      <div class="col-sm-4"></div>
      <div class="clearfix visible-sm-block"></div>
    </div>

    <div class="row">
      <div class="col-sm-2">
        <label for="example">Example:</label>
      </div>
      <div class="col-sm-6">
        <select id="example" class="form-control"
          (change)="loadSelectedExample(selectedSet, $event.target.value)">
          <option *ngFor="let example of examples.exampleList[selectedSet]"
            [value]="example"
            [selected]="selectedExample === example">
            {{examples.examples[selectedSet][example]}}
          </option>
        </select>
      </div>
      <div class="col-sm-4"></div>
      <div class="clearfix visible-sm-block"></div>
    </div>

    <div class="row">
      <div class="col-sm-2">
        <label for="example">Framework:</label>
      </div>
      <div class="col-sm-6">
        <select id="example" class="form-control"
          (change)="loadSelectedFramework($event.target.value)">
          <option *ngFor="let framework of examples.frameworkList"
            [value]="framework"
            [selected]="selectedFramework === framework">
            {{examples.frameworks[framework]}}
          </option>
        </select>
      </div>
      <div class="col-sm-4"></div>
      <div class="clearfix visible-sm-block"></div>
    </div>

  </div>

  <div class="row">
    <div class="col-sm-5">
      <h4>JSON Schema and Layout</h4>
      <div ace-editor
        [text]="jsonFormSchema"
        [options]="aceEditorOptions"
        [readOnly]="false"
        [autoUpdateContent]="true"
        (textChanged)="generateForm($event)"
        (window:resize)="resizeAceEditor()"
        [style.min-height]="aceHeight + 'px'"
        style="width:100%; overflow: auto; border: 1px solid black;">
        (loading form specification...)
      </div>
    </div>
    <div class="col-sm-7">

      <h4>Generated Form</h4>
      <json-schema-form
        *ngIf="formActive"
        loadExternalAssets="true"
        [form]="jsonFormObject"
        [options]="jsonFormOptions"
        [framework]="selectedFramework"
        (onChanges)="onChanges($event)"
        (onSubmit)="onSubmit($event)"
        (isValid)="isValid($event)"
        (validationErrors)="validationErrors($event)">
      </json-schema-form>

      <hr>

      <p>
        Valid?:
        <strong *ngIf="formIsValid || prettyValidationErrors"
          [class.text-success]="formIsValid"
          [class.text-danger]="!formIsValid">
          {{formIsValid ? 'Yes' : 'No'}}
        </strong>
        <span *ngIf="prettyValidationErrors">
          — errors from validationErrors():
        </span>
      </p>

      <pre *ngIf="prettyValidationErrors" class="bg-danger">{{prettyValidationErrors}}</pre>

      Live data — from onChanges():
      <pre [class.bg-success]="!prettyValidationErrors && prettyLiveFormData !== '{}'"
        [class.bg-danger]="prettyValidationErrors">{{prettyLiveFormData}}</pre>

      Submitted data — from onSubmit():
      <pre [class.bg-success]="prettySubmittedFormData !== 'null'">{{prettySubmittedFormData}}</pre>

    </div>
  </div>

</div>
<footer class="footer"></footer>