View on GitHub

sc-form

Download this project as a .zip file Download this project as a tar.gz file

Scille Form (for Angularjs)

A Form is a collection of Controls for AngularJS. Controls are ways for a user to enter data. This library is created by DUBOIS Romain and maintained by the Scille team.

Usage

Registration

To be able to use the directive, you need to register the sc-form module as a dependency:

angular.module('yourModule', ['sc-form'
    // other dependencies
]);

Directive

Directives can work on both attribute and element levels.

<div sc-text-input-directive
    ng-model="textModel"
    icon="{{icon}}"
    label="{{label}}"
    placeholder="{{placeholder}}"
    popover-msg="{{popoverMsg}}"
    error-msg="errorMsg"
    is-disabled="isDisabled"
    upper-first-letter="upperFirstLetter">
</div>

<div sc-list-text-input-directive
    ng-model="listModel"
    icon="{{icon}}"
    label="{{label}}"
    placeholder="{{placeholder}}"
    popover-msg="{{popoverMsg}}"
    change-position="changePosition"
    error-msg="errorMsg"
    is-disabled="isDisabled"
    upper-first-letter="upperFirstLetter">
</div>

<div sc-pwd-input-directive
    ng-model="pwdModel"
    icon="{{icon}}"
    label="{{label}}"
    placeholder="{{placeholder}}"
    popover-msg="{{popoverMsg}}"
    error-msg="errorMsg"
    strength="strength">
</div>

<div sc-number-input-directive
    ng-model="numberModel"
    icon="{{icon}}"
    label="{{label}}"
    placeholder="{{placeholder}}"
    popover-msg="{{popoverMsg}}"
    error-msg="errorMsg"
    is-disabled="isDisabled"
    step="step">
</div>

<div sc-date-input-directive
    ng-model="dateModel"
    icon="{{icon}}"
    label="{{label}}"
    popover-msg="{{popoverMsg}}"
    type="{{type}}"approximative-model="approximative-model"
    error-msg="errorMsg"
    is-disabled="isDisabled">
</div>

<div sc-select-input-directive
    ng-model="selectModel"
    icon="{{icon}}"
    label="{{label}}"
    options-json="{{optionsJSON}}"
    error-msg="errorMsg"
    is-disabled="isDisabled"
    options-model="optionsModel">
</div>

<div sc-list-select-input-directive
    ng-model="listSelectModel"
    icon="{{icon}}"
    label="{{label}}"
    options-json="{{optionsJSON}}"
    change-position="changePosition"
    error-msg="errorMsg"
    is-disabled="isDisabled"
    options-model="optionsModel">
</div>

<div sc-array-input-directive
    ng-model="arrayModel"
    add-button="{{addButton}}"
    json="{{json}}"
    label="{{label}}"
    is-disabled="isDisabled">
</div>

<div sc-img-input-directive
    ng-model="imgModel"label="{{label}}"
    placeholder="{{placeholder}}"
    error-msg="errorMsg"
    is-disabled="isDisabled">
</div>

Note:

ng-model: Will try to bind to the property given by evaluating the expression on the current scope. If the property doesn't already exist on this scope, it will be created implicitly and added to the scope.
add-button: Sets the button value
icon: Sets the icon
json: Sets the JSON file
label: Sets the label text
options-json: Sets the select options values as JSON file
placeholder: Sets the input placeholder
popover-msg: Sets the popover message
type: Sets the input type (date or datetime-local)
approximative-model: Determines if the input is an approximate date
change-position: Determines if Up/Down buttons are hidden or not
error-msg: Sets the error message
is-disabled: Determines if the input is disabled or not
options-model: Sets the select options values
strength: Sets the regex password and unmatch password error value.
step: Specifies the legal number intervals
upper-first-letter: Capitalizes the first letter of string

Demonstration

Text Input

Model Value: {{textModel}}

Default

<div sc-text-input-directive
    ng-model="textModel">
</div>

Icon

<div sc-text-input-directive
    ng-model="textModel"
    icon="user">
</div>

Label

<div sc-text-input-directive
    ng-model="textModel"
    label="Label">
</div>

Placeholder

<div sc-text-input-directive
    ng-model="textModel"
    placeholder="Placeholder">
</div>

Popover Message

<div sc-text-input-directive
    ng-model="textModel"
    popover-msg="Pop Over">
</div>

Error Message

<div sc-text-input-directive
    ng-model="textModel"
    error-msg="{{errorMsg}}">
</div>

errorMsg:

Upper First Letter

<div sc-text-input-directive
    ng-model="textModel"
    upper-first-letter="{{upperFirstLetter}}">
</div>

upperFirstLetter: {{upperFirstLetter}}

Disabled

<div sc-text-input-directive
    ng-model="textModel"
    is-disabled="{{isDisabled}}">
</div>

isDisabled: {{isDisabled}}

List Text Input

Model Value: {{listTextModel}}

Default

<div sc-list-text-input-directive
    ng-model="listTextModel">
</div>

Icon

<div sc-list-text-input-directive
    ng-model="listTextModel"
    icon="user">
</div>

Label

<div sc-list-text-input-directive
    ng-model="listTextModel"
    label="Label">
</div>

Placeholder

<div sc-list-text-input-directive
    ng-model="listTextModel"
    placeholder="Placeholder">
</div>

Popover Message

<div sc-list-text-input-directive
    ng-model="listTextModel"
    popover-msg="Pop Over">
</div>

Change Position

<div sc-list-text-input-directive
    ng-model="listTextModel"
    change-position="{{changePosition}}">
</div>

changePosition: {{changePosition}}

Error Message

<div sc-list-text-input-directive
    ng-model="listTextModel"
    error-msg="{{errorMsg}}">
</div>

errorMsg:

Upper First Letter

<div sc-list-text-input-directive
    ng-model="listTextModel"
    upper-first-letter="{{upperFirstLetter}}">
</div>

upperFirstLetter: {{upperFirstLetter}}

Disabled

<div sc-list-text-input-directive
    ng-model="listTextModel"
    is-disabled="{{isDisabled}}">
</div>

isDisabled: {{isDisabled}}

Password Input

Model Value: {{pwdModel}}

Default

<div sc-pwd-input-directive
    ng-model="pwdModel">
</div>

Icon

<div sc-pwd-input-directive
    ng-model="pwdModel"
    icon="user">
</div>

Label

<div sc-pwd-input-directive
    ng-model="pwdModel"
    label="Label">
</div>

Placeholder

<div sc-pwd-input-directive
    ng-model="pwdModel"
    placeholder="Placeholder">
</div>

Popover Message

<div sc-pwd-input-directive
    ng-model="pwdModel"
    popover-msg="Pop Over">
</div>

Error Message

<div sc-pwd-input-directive
    ng-model="pwdModel"
    error-msg="{{errorMsg}}">
</div>

errorMsg:

Strength

<div sc-pwd-input-directive
    ng-model="pwdModel"
    strength="{{strength}}">
</div>

Strength: {{strength}}

Number Input

Model Value: {{numberModel}}

Default

<div sc-number-input-directive
    ng-model="numberModel">
</div>

Icon

<div sc-number-input-directive
    ng-model="numberModel"
    icon="user">
</div>

Label

<div sc-number-input-directive
    ng-model="numberModel"
    label="Label">
</div>

Placeholder

<div sc-number-input-directive
    ng-model="numberModel"
    placeholder="Placeholder">
</div>

Popover Message

<div sc-number-input-directive
    ng-model="numberModel"
    popover-msg="Pop Over">
</div>

Error Message

<div sc-number-input-directive
    ng-model="numberModel"
    error-msg="{{errorMsg}}">
</div>

errorMsg:

Disabled

<div sc-number-input-directive
    ng-model="numberModel"
    is-disabled="{{isDisabled}}">
</div>

isDisabled: {{isDisabled}}

Step

<div sc-number-input-directive
    ng-model="numberModel"
    step="{{stepValue}}">
</div>

stepValue:

Date Input

Model Value: {{dateModel}}

Default

<div sc-date-input-directive
    ng-model="dateModel">
</div>

Icon

<div sc-date-input-directive
    ng-model="dateModel"
    icon="user">
</div>

Label

<div sc-date-input-directive
    ng-model="dateModel"
    label="Label">
</div>

Popover Message

<div sc-date-input-directive
    ng-model="dateModel"
    popover-msg="Pop Over">
</div>

Type

<div sc-date-input-directive
    ng-model="dateModel"
    type="date">
</div>

<div sc-date-input-directive
    ng-model="dateModel"
    type="datetime-local">
</div>

Approximative Model

<div sc-date-input-directive
    ng-model="dateModel"
    approximative-model="{{approximativeModel}}">
</div>

approximativeModel: {{approximativeModel}}

Error Message

<div sc-date-input-directive
    ng-model="dateModel"
    error-msg="{{errorMsg}}">
</div>

errorMsg:

Disabled

<div sc-date-input-directive
    ng-model="dateModel"
    is-disabled="{{isDisabled}}">
</div>

isDisabled: {{isDisabled}}

Select Input

Model Value: {{selectModel}}

Default

<div sc-select-input-directive
    ng-model="selectModel">
</div>

Icon

<div sc-select-input-directive
    ng-model="selectModel"
    icon="user">
</div>

Label

<div sc-select-input-directive
    ng-model="selectModel"
    label="Label">
</div>

Options Model

<div sc-select-input-directive
    ng-model="selectModel"
    options-model="{{optionsListModel}}">
</div>

<div sc-select-input-directive
    ng-model="selectModel"
    options-model="{{optionsDictModel}}">
</div>

Options List Model Value:

Options Dict Model Value:

Options JSON

select_input.json:

[
    { "libelle": "libelle option JSON1", "value": "option JSON1" },
    { "libelle": "libelle option JSON2", "value": "option JSON2" }
]

<div sc-select-input-directive
    ng-model="selectModel"
    options-json="select_input.json">
</div>

Error Message

<div sc-select-input-directive
    ng-model="selectModel"
    error-msg="{{errorMsg}}">
</div>

errorMsg:

Disabled

<div sc-select-input-directive
    ng-model="selectModel"
    is-disabled="{{isDisabled}}">
</div>

isDisabled: {{isDisabled}}

List Select Input

Model Value: {{listSelectModel}}

Default

<div sc-list-select-input-directive
    ng-model="listSelectModel">
</div>

Icon

<div sc-list-select-input-directive
    ng-model="listSelectModel"
    icon="user">
</div>

Label

<div sc-list-select-input-directive
    ng-model="listSelectModel"
    label="Label">
</div>

Options Model

<div sc-list-select-input-directive
    ng-model="listSelectModel"
    options-model="{{optionsListModel}}">
</div>

<div sc-select-input-directive
    ng-model="listSelectModel"
    options-model="{{optionsDictModel}}">
</div>

Options List Model Value:

Options Dict Model Value:

Options JSON

select_input.json:

[
    { "libelle": "libelle option JSON1", "value": "option JSON1" },
    { "libelle": "libelle option JSON2", "value": "option JSON2" }
]

<div sc-list-select-input-directive
    ng-model="listSelectModel"
    options-json="select_input.json">
</div>

Change Position

<div sc-list-select-input-directive
    ng-model="listSelectModel"
    change-position="{{changePosition}}">
</div>

changePosition: {{changePosition}}

Error Message

<div sc-list-select-input-directive
    ng-model="listSelectModel"
    error-msg="{{errorMsg}}">
</div>

errorMsg:

Disabled

<div sc-list-select-input-directive
    ng-model="listSelectModel"
    is-disabled="{{isDisabled}}">
</div>

isDisabled: {{isDisabled}}

Array Input

Model Value: {{arrayModel}}

array_input.json:

{
    "title":"JSON Title",
    "inputs": [
        { "type": "text", "model": "Name" },
        { "type": "list-text", "model": "FirstName"},
        { "type": "number", "model": "Size" },
        { "type": "select", "model": "Primary Eyes Colors", "optionsModel": ["blue", "grown", "green"] },
        { "type": "list-select", "model": "Eyes Color", "optionsJSON": "eyes_color.json" }
        { "type": "date", "model": "Birthday" },
        { "type": "datetime-local", "model": "BirthdayWithHours" },
        { "type": "img", "model": "Picture" }
    ]
}

eyes_color.json:

[
    { "libelle": "Blue eyes", "value": "blue" },
    { "libelle": "Brown eyes", "value": "brown" },
    { "libelle": "Green eyes", "value": "green"}
]

Default

<div sc-array-input-directive
    ng-model="arrayModel"
    json="array_input.json">
</div>

Add Button Value

<div sc-date-input-directive
    ng-model="numberModel"
    json="array_input.json"
    add-button="{{addButton}}">
</div>

addButton:

Label

<div sc-array-input-directive
    ng-model="arrayModel"
    json="array_input.json"
    label="Label">
</div>

Disabled

<div sc-array-input-directive
    ng-model="arrayModel"
    json="array_input.json"
    is-disabled="{{isDisabled}}">
</div>

isDisabled: {{isDisabled}}

Image Input

Model Value: {{imgModel}}

Default

<div sc-img-input-directive
    ng-model="imgModel">
</div>

Label

<div sc-img-input-directive
    ng-model="imgModel"
    label="Label">
</div>

Placeholder

<div sc-img-input-directive
    ng-model="imgModel"
    placeholder="Placeholder">
</div>

Error Message

<div sc-img-input-directive
    ng-model="imgModel"
    error-msg="{{errorMsg}}">
</div>

errorMsg:

Disabled

<div sc-img-input-directive
    ng-model="imgModel"
    is-disabled="{{isDisabled}}">
</div>

isDisabled: {{isDisabled}}

Contributors

DUBOIS Romain, Engineer R&D at SCILLE romain.dubois@scille.fr

Landieth Jérôme, Engineer R&D at SCILLE jerome.landieth@scille.fr

MEZINO Vincent, Engineer R&D at SCILLE vincent.mezino@scille.fr