commit 2ec38c2c46109d019f0e3a7c4d72550d23fc9177
author Matteo Scandolo <teo@opennetworking.org> Wed Jul 12 13:13:26 2017 -0700
committer Gerrit Code Review <gerrit@localhost> Wed Jul 12 13:13:26 2017 -0700
tree 12e9438f140a1eddedfff61e5cb250172da2e774
parent 1b6c06c425b74d5f9fa7f7d841d6dc580a06730f
parent 80056233839f0441233a9dabb009e49cef665996

Merge "[CORD-1170] Mandatory fields are not highlighted in forms"

src/app/core/field/field.html

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

src/app/core/field/field.scss

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

src/app/core/field/field.ts

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

src/app/core/form/form.html

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>

src/app/core/form/form.spec.ts

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