Form Ng

Form Ng

<div ng-app="Example.form" ng-strict-di style="width: 700px"
  ng-controller="FormExampleCtrl as formExampleCtrl">

  <form class="ring-form" name="ExampleForm" novalidate>
    <span class="ring-form__title">Form Title</span>

    <div class="ring-form__group">
      <rg-input size="M" required ng-model="formExampleCtrl.inputValue" label="Medium Input" name="inputMD" type="text"></rg-input>
      <div rg-error-bubble="ExampleForm.inputMD"></div>
    </div>

    <div class="ring-form__group">
      <rg-select options="item.name for item in formExampleCtrl.data track by item.name"></rg-select>
      <div class="ring-form__control__description">I am a simple description</div>
    </div>

    <div class="ring-form__group">
      <div>
        <rg-checkbox ng-model="formExampleCtrl.checkedModel">Checkbox 1</rg-checkbox>
      </div>
      <div>
        <rg-checkbox ng-model="formExampleCtrl.checkedModel">Checkbox 2</rg-checkbox>
      </div>
      <div>
        <rg-checkbox>Checkbox 3</rg-checkbox>
      </div>
      <div>
        <rg-checkbox>Checkbox 4</rg-checkbox>
      </div>
    </div>

    <div class="ring-form__footer">
      <rg-button mode="primary">Save</rg-button>
      <rg-button>Cancel</rg-button>
    </div>
  </form>
</div>

import angular from 'angular';

import '@jetbrains/ring-ui/components/form/form.scss';

import ButtonNg from '@jetbrains/ring-ui/components/button-ng/button-ng';
import SelectNg from '@jetbrains/ring-ui/components/select-ng/select-ng';
import CheckboxNg from '@jetbrains/ring-ui/components/checkbox-ng/checkbox-ng';
import FormNg from '@jetbrains/ring-ui/components/form-ng/form-ng';
import InputNg from '@jetbrains/ring-ui/components/input-ng/input-ng';

angular.module('Example.form', [FormNg, CheckboxNg, SelectNg, ButtonNg, InputNg]).
controller('FormExampleCtrl', function ($scope) {
  this.checkedModel = true;
  this.data = [{name: 'Ada'}, {name: 'Nik'}];
});