#726 required validator for radio buttons, bug fixes

- REST service data support, fixes #747
- proper value selection on reload, fixes #746

ng2-components/ng2-activiti-form/src/components/widgets/core/form-field-validator.ts

@@ -34,7 +34,8 @@ export class RequiredFieldValidator implements FormFieldValidator {
         FormFieldTypes.TYPEAHEAD,
         FormFieldTypes.DROPDOWN,
         FormFieldTypes.PEOPLE,
-        FormFieldTypes.FUNCTIONAL_GROUP
+        FormFieldTypes.FUNCTIONAL_GROUP,
+        FormFieldTypes.RADIO_BUTTONS
     ];
 
     isSupported(field: FormFieldModel): boolean {
@@ -54,6 +55,11 @@ export class RequiredFieldValidator implements FormFieldValidator {
                 }
             }
 
+            if (field.type === FormFieldTypes.RADIO_BUTTONS) {
+                let option = field.options.find(opt => opt.id === field.value);
+                return !!option;
+            }
+
             if (!field.value) {
                 return false;
             }

ng2-components/ng2-activiti-form/src/components/widgets/core/form-field.model.ts

@@ -182,13 +182,12 @@ export class FormFieldModel extends FormWidgetModel {
          but saving back as object: { id: <id>, name: <name> }
          */
         if (json.type === FormFieldTypes.RADIO_BUTTONS) {
-            // Activiti has a bug with default radio button value,
-            // so try resolving current one with a fallback to first entry
-            let entry: FormFieldOption[] = this.options.filter(opt => opt.id === value);
+            // Activiti has a bug with default radio button value where initial selection passed as `name` value
+            // so try resolving current one with a fallback to first entry via name or id
+            // TODO: needs to be reported and fixed at Activiti side
+            let entry: FormFieldOption[] = this.options.filter(opt => opt.id === value || opt.name === value);
             if (entry.length > 0) {
                 value = entry[0].id;
-            } else if (this.options.length > 0) {
-                value = this.options[0].id;
             }
         }
 

ng2-components/ng2-activiti-form/src/components/widgets/dropdown/dropdown.widget.ts

@@ -21,7 +21,6 @@ import { WidgetComponent } from './../widget.component';
 import { FormFieldOption } from './../core/form-field-option';
 
 declare let __moduleName: string;
-declare var componentHandler;
 
 @Component({
     moduleId: __moduleName,

ng2-components/ng2-activiti-form/src/components/widgets/radio-buttons/radio-buttons.widget.css

@@ -1 +1,17 @@
 .radio-buttons-widget {}
+
+.radio-buttons-widget__invalid .mdl-radio__label {
+    color: #d50000;
+}
+
+.radio-buttons-widget__invalid .radio-buttons-widget__label {
+    color: #d50000;
+}
+
+.radio-buttons-widget__invalid .radio-buttons-widget__label:after {
+    background-color: #d50000;
+}
+
+.radio-buttons-widget__invalid .mdl-textfield__error {
+    visibility: visible !important;
+}

ng2-components/ng2-activiti-form/src/components/widgets/radio-buttons/radio-buttons.widget.html

@@ -1,4 +1,6 @@
-<div class="radio-buttons-widget">
+<div class="radio-buttons-widget"
+     [class.radio-buttons-widget__invalid]="!field.isValid">
+    <label class="radio-buttons-widget__label" [attr.for]="field.id">{{field.name}}</label>
     <div *ngFor="let opt of field.options">
         <label [attr.for]="opt.id" class="mdl-radio mdl-js-radio">
             <input type="radio"
@@ -12,4 +14,5 @@
             <span class="mdl-radio__label">{{opt.name}}</span>
         </label>
     </div>
+    <span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
 </div>

ng2-components/ng2-activiti-form/src/components/widgets/radio-buttons/radio-buttons.widget.ts

@@ -15,8 +15,10 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { WidgetComponent } from './../widget.component';
+import { FormService } from '../../../services/form.service';
+import { FormFieldOption } from './../core/form-field-option';
 
 declare let __moduleName: string;
 declare var componentHandler;
@@ -27,6 +29,32 @@ declare var componentHandler;
     templateUrl: './radio-buttons.widget.html',
     styleUrls: ['./radio-buttons.widget.css']
 })
-export class RadioButtonsWidget extends WidgetComponent {
+export class RadioButtonsWidget extends WidgetComponent implements OnInit {
+
+    constructor(private formService: FormService) {
+        super();
+    }
+
+    ngOnInit() {
+        if (this.field && this.field.restUrl) {
+            this.formService
+                .getRestFieldValues(
+                    this.field.form.taskId,
+                    this.field.id
+                )
+                .subscribe(
+                    (result: FormFieldOption[]) => {
+                        let options = [];
+                        this.field.options = result || [];
+                        this.field.updateForm();
+                    },
+                    this.handleError
+                );
+        }
+    }
+
+    handleError(error: any) {
+        console.error(error);
+    }
 
 }