[CORD-1170] Mandatory fields are not highlighted in forms
Change-Id: I643e595a1777274232b857b5fa49514ce637b932
diff --git a/src/app/core/field/field.html b/src/app/core/field/field.html
index e472939..9baa1d5 100644
--- a/src/app/core/field/field.html
+++ b/src/app/core/field/field.html
@@ -1,4 +1,7 @@
-<label ng-if="vm.field.type !== 'object' && vm.field.type !== 'array'">{{vm.field.label}}</label>
+<label ng-if="vm.field.type !== 'object' && vm.field.type !== 'array'">
+ {{vm.field.label}}
+ <span class="required" ng-if="vm.field.validators.required">*</span>
+</label>
<input
xos-custom-validator custom-validator="vm.field.validators.custom || null"
ng-if="vm.field.type !== 'boolean' && vm.field.type !== 'object' && vm.field.type !== 'select' && vm.field.type !== 'array'"
diff --git a/src/app/core/field/field.scss b/src/app/core/field/field.scss
new file mode 100644
index 0000000..d15f359
--- /dev/null
+++ b/src/app/core/field/field.scss
@@ -0,0 +1,5 @@
+@import "../../style/vars";
+
+span.required {
+ color: $color-accent;
+}
\ No newline at end of file
diff --git a/src/app/core/field/field.ts b/src/app/core/field/field.ts
index ad36473..5c5b48a 100644
--- a/src/app/core/field/field.ts
+++ b/src/app/core/field/field.ts
@@ -1,3 +1,4 @@
+import './field.scss';
import {IXosConfigHelpersService} from '../services/helpers/config.helpers';
import {IXosFormHelpersService} from '../form/form-helpers';
import * as _ from 'lodash';
diff --git a/src/app/core/form/form.html b/src/app/core/form/form.html
index 5da8c4e..4476741 100644
--- a/src/app/core/form/form.html
+++ b/src/app/core/form/form.html
@@ -21,4 +21,7 @@
{{action.label}}
</button>
</div>
+ <div class="form-group">
+ Fields marked with <span class="required">*</span> are <span class="required">required</span> fields.
+ </div>
</form>
diff --git a/src/app/core/form/form.spec.ts b/src/app/core/form/form.spec.ts
index c5244e0..6b2a196 100644
--- a/src/app/core/form/form.spec.ts
+++ b/src/app/core/form/form.spec.ts
@@ -96,7 +96,9 @@
name: 'email',
label: 'Mail:',
type: 'email',
- validators: {}
+ validators: {
+ required: true
+ }
},
{
name: 'birthDate',
@@ -170,9 +172,16 @@
// TODO move in xosField test
it('should set a custom label', () => {
- let nameField = element[0].getElementsByClassName('form-group')[0];
+ let nameField = element[0].getElementsByClassName('form-group')[1];
let label = angular.element(nameField.getElementsByTagName('label')[0]).text();
- expect(label).toEqual('Id:');
+ expect(label).toContain('Name:');
+ expect(label).not.toContain('*');
+ });
+
+ it('should print an * for required fields', () => {
+ let nameField = element[0].getElementsByClassName('form-group')[2];
+ let label = angular.element(nameField.getElementsByTagName('label')[0]).text();
+ expect(label).toContain('*');
});
// TODO move test in xos-field