Skip to content

Commit 005eab7

Browse files
davidlgjdavidlgj
committed
Merge pull request #353 from CaseRails/disable-input-feedback
disableErrorState, disableSuccessState form options. fixes #214
2 parents e94102a + f9b332f commit 005eab7

File tree

10 files changed

+180
-9
lines changed

10 files changed

+180
-9
lines changed

‎docs/index.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -623,6 +623,8 @@ General options most field types can handle:
623623
validationMessage: "Oh noes, please write a proper address", // A custom validation error message
624624
onChange: "valueChanged(form.key,modelValue)", // onChange event handler, expression or function
625625
feedback: false, // Inline feedback icons
626+
disableSuccessState: false, // Set true to NOT apply 'has-success' class to a field that was validated successfully
627+
disableErrorState: false, // Set true to NOT apply 'has-error' class to a field that failed validation
626628
placeholder: "Input...", // placeholder on inputs and textarea
627629
ngModelOptions: { ... }, // Passed along to ng-model-options
628630
readonly: true, // Same effect as readOnly in schema. Put on a fieldset or array

‎src/directives/decorators/bootstrap/checkbox.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="checkbox schema-form-checkbox {{form.htmlClass}}"
2-
ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}">
2+
ng-class="{'has-error': form.disableErrorState !== true && hasError(), 'has-success': form.disableSuccessState !== true && hasSuccess()}">
33
<label class="{{form.labelHtmlClass}}">
44
<input type="checkbox"
55
sf-changed="form"

‎src/directives/decorators/bootstrap/checkboxes.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div sf-array="form" ng-model="$$value$$"
22
class="form-group schema-form-checkboxes {{form.htmlClass}}"
3-
ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}">
3+
ng-class="{'has-error': form.disableErrorState !== true && hasError(), 'has-success': form.disableSuccessState !== true && hasSuccess()}">
44
<label class="control-label {{form.labelHtmlClass}}" ng-show="showTitle()">{{form.title}}</label>
55
<div class="checkbox" ng-repeat="val in titleMapValues track by $index" >
66
<label>

‎src/directives/decorators/bootstrap/default.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="form-group schema-form-{{form.type}} {{form.htmlClass}}"
2-
ng-class="{'has-error': hasError(), 'has-success': hasSuccess(), 'has-feedback': form.feedback !== false }">
2+
ng-class="{'has-error': form.disableErrorState !== true && hasError(), 'has-success': form.disableSuccessState !== true && hasSuccess(), 'has-feedback': form.feedback !== false }">
33
<label class="control-label {{form.labelHtmlClass}}" ng-class="{'sr-only': !showTitle()}" for="{{form.key.slice(-1)[0]}}">{{form.title}}</label>
44

55
<input ng-if="!form.fieldAddonLeft && !form.fieldAddonRight"

‎src/directives/decorators/bootstrap/radio-buttons.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="form-group schema-form-radiobuttons {{form.htmlClass}}"
2-
ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}">
2+
ng-class="{'has-error': form.disableErrorState !== true && hasError(), 'has-success': form.disableSuccessState !== true && hasSuccess()}">
33
<div>
44
<label class="control-label {{form.labelHtmlClass}}" ng-show="showTitle()">{{form.title}}</label>
55
</div>

‎src/directives/decorators/bootstrap/radios-inline.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="form-group schema-form-radios-inline {{form.htmlClass}}"
2-
ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}">
2+
ng-class="{'has-error': form.disableErrorState !== true && hasError(), 'has-success': form.disableSuccessState !== true && hasSuccess()}">
33
<label class="control-label {{form.labelHtmlClass}}" ng-show="showTitle()">{{form.title}}</label>
44
<div>
55
<label class="radio-inline" ng-repeat="item in form.titleMap" >

‎src/directives/decorators/bootstrap/radios.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="form-group schema-form-radios {{form.htmlClass}}" ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}">
1+
<div class="form-group schema-form-radios {{form.htmlClass}}" ng-class="{'has-error': form.disableErrorState !== true && hasError(), 'has-success': form.disableSuccessState !== true && hasSuccess()}">
22
<label class="control-label {{form.labelHtmlClass}}" ng-show="showTitle()">{{form.title}}</label>
33
<div class="radio" ng-repeat="item in form.titleMap" >
44
<label>

‎src/directives/decorators/bootstrap/select.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="form-group {{form.htmlClass}} schema-form-select"
2-
ng-class="{'has-error': hasError(), 'has-success': hasSuccess(), 'has-feedback': form.feedback !== false}">
2+
ng-class="{'has-error': form.disableErrorState !== true && hasError(), 'has-success': form.disableSuccessState !== true && hasSuccess(), 'has-feedback': form.feedback !== false}">
33
<label class="control-label {{form.labelHtmlClass}}" ng-show="showTitle()">
44
{{form.title}}
55
</label>

‎src/directives/decorators/bootstrap/textarea.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="form-group has-feedback {{form.htmlClass}} schema-form-textarea" ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}">
1+
<div class="form-group has-feedback {{form.htmlClass}} schema-form-textarea" ng-class="{'has-error': form.disableErrorState !== true && hasError(), 'has-success': form.disableSuccessState !== true && hasSuccess()}">
22
<label class="{{form.labelHtmlClass}}" ng-class="{'sr-only': !showTitle()}" for="{{form.key.slice(-1)[0]}}">{{form.title}}</label>
33

44
<textarea ng-if="!form.fieldAddonLeft && !form.fieldAddonRight"

‎test/directives/schema-form-test.js

Lines changed: 170 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1823,5 +1823,174 @@ describe('directive',function(){
18231823
});
18241824
});
18251825

1826+
//generate disableSuccessState, disableErrorState tests for each field
1827+
var fields = [
1828+
{
1829+
name: 'default',
1830+
property: {
1831+
type: 'string',
1832+
pattern: "^[a-zA-Z]+$"
1833+
},
1834+
form: {
1835+
key: ['field']
1836+
}
1837+
},
1838+
{
1839+
name: 'textarea',
1840+
property: {
1841+
type: 'string',
1842+
pattern: "^[a-zA-Z]+$"
1843+
},
1844+
form: {
1845+
key: ['field'],
1846+
type: 'textarea'
1847+
}
1848+
},
1849+
{
1850+
name: 'checkbox',
1851+
property: {
1852+
type: 'boolean'
1853+
},
1854+
form: {
1855+
key: ["field"]
1856+
}
1857+
},
1858+
{
1859+
name: 'radio buttons',
1860+
property: {
1861+
type: 'boolean',
1862+
},
1863+
form: {
1864+
key: ["field"],
1865+
type: "radiobuttons",
1866+
titleMap: [
1867+
{
1868+
"value": false,
1869+
"name": "No way"
1870+
},
1871+
{
1872+
"value": true,
1873+
"name": "OK"
1874+
}
1875+
]
1876+
}
1877+
},
1878+
{
1879+
name: 'radios inline',
1880+
property: {
1881+
type: 'boolean',
1882+
},
1883+
form: {
1884+
key: ["field"],
1885+
type: "radios-inline",
1886+
titleMap: [
1887+
{
1888+
"value": false,
1889+
"name": "No way"
1890+
},
1891+
{
1892+
"value": true,
1893+
"name": "OK"
1894+
}
1895+
]
1896+
}
1897+
},
1898+
{
1899+
name: 'radios',
1900+
property: {
1901+
type: 'boolean',
1902+
},
1903+
form: {
1904+
key: ["field"],
1905+
type: "radios",
1906+
titleMap: [
1907+
{
1908+
"value": false,
1909+
"name": "No way"
1910+
},
1911+
{
1912+
"value": true,
1913+
"name": "OK"
1914+
}
1915+
]
1916+
}
1917+
},
1918+
{
1919+
name: 'select',
1920+
property: {
1921+
type: 'boolean',
1922+
},
1923+
form: {
1924+
key: ["field"],
1925+
type: "select",
1926+
titleMap: [
1927+
{
1928+
"value": false,
1929+
"name": "No way"
1930+
},
1931+
{
1932+
"value": true,
1933+
"name": "OK"
1934+
}
1935+
]
1936+
}
1937+
}
1938+
];
1939+
1940+
fields.forEach(function (field) {
1941+
1942+
it('should not add "has-success" class to ' + field.name + " field if a correct value is entered, but disableSuccessState is set on form", function () {
1943+
inject(function($compile, $rootScope){
1944+
var scope = $rootScope.$new();
1945+
scope.model = {}
1946+
scope.schema = {
1947+
type: 'object',
1948+
properties: {
1949+
field: field.property
1950+
}
1951+
};
1952+
scope.form = [field.form];
1953+
1954+
var tmpl = angular.element('<form name="theForm" sf-schema="schema" sf-form="form" sf-model="model"></form>');
1955+
$compile(tmpl)(scope);
1956+
$rootScope.$apply();
1957+
var ngModelCtrl = scope.theForm['{{form.key.slice(-1)[0]}}'] || scope.theForm['{{form.key.join(\'.\')}}'];
1958+
ngModelCtrl.$valid = true;
1959+
ngModelCtrl.$pristine = false;
1960+
$rootScope.$apply();
1961+
tmpl.children().eq(0).children().eq(0).hasClass('has-success').should.be.true;
1962+
scope.form[0].disableSuccessState = true;
1963+
$rootScope.$apply();
1964+
tmpl.children().eq(0).children().eq(0).hasClass('has-success').should.be.false;
1965+
});
1966+
});
18261967

1827-
});
1968+
it('should not add "has-error" class to ' + field.name + " field if invalid value is entered, but disableErrorState is set on form", function () {
1969+
inject(function($compile, $rootScope){
1970+
var scope = $rootScope.$new();
1971+
scope.model = {
1972+
field: field.errorValue
1973+
}
1974+
scope.schema = {
1975+
type: 'object',
1976+
properties: {
1977+
field: field.property
1978+
}
1979+
};
1980+
scope.form = [field.form];
1981+
1982+
var tmpl = angular.element('<form name="theForm" sf-schema="schema" sf-form="form" sf-model="model"></form>');
1983+
$compile(tmpl)(scope);
1984+
$rootScope.$apply();
1985+
var ngModelCtrl = scope.theForm['{{form.key.slice(-1)[0]}}'] || scope.theForm['{{form.key.join(\'.\')}}'];
1986+
ngModelCtrl.$invalid = true;
1987+
ngModelCtrl.$pristine = false;
1988+
$rootScope.$apply();
1989+
tmpl.children().eq(0).children().eq(0).hasClass('has-error').should.be.true;
1990+
scope.form[0].disableErrorState = true;
1991+
$rootScope.$apply();
1992+
tmpl.children().eq(0).children().eq(0).hasClass('has-error').should.be.false;
1993+
});
1994+
});
1995+
});
1996+
});

0 commit comments

Comments
 (0)