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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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