Form with material design

dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.html

@@ -1,5 +1,7 @@
 <div [formGroup]="form">
-    <mat-radio-button name="{{field.id}}" value="true" label="Yes" formControlName="value"></mat-radio-button>
+    <mat-radio-group formControlName="value">
+        <mat-radio-button name="{{field.id}}" value="true">Yes</mat-radio-button>
         <br>
-    <mat-radio-button name="{{field.id}}" value="false" label="No" formControlName="value"></mat-radio-button>
+        <mat-radio-button name="{{field.id}}" value="false">No</mat-radio-button>
+    </mat-radio-group>
 </div>

dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.html

@@ -1,5 +1,6 @@
 <div [formGroup]="form" class="form-group">
-    <mat-checkbox [formControl]="form.get('value')"  binary="true">{{field.data.label}}</mat-checkbox>
+    <mat-checkbox formControlName="value">{{field.data.label}}</mat-checkbox>
+    <!-- <input type="checkbox" formControlName="value"> -->
 </div>
 
-<!-- label="{{field.data.label}}" -->
+<!-- label="{{field.data.label}}" formControlName="form.get('value').value"-->

dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.ts

@@ -15,4 +15,5 @@ export class DynamicFieldCheckBoxComponent {
     @Input() field: Field;
     @Input() form: FormGroup;
 
+
 }

dmp-frontend/src/app/form/dynamic-fields/dynamic-field-dropdown/dynamic-field-dropdown.html

@@ -1,5 +1,8 @@
 <div [formGroup]="form">
-    <select class="form-control" formControlName="value">
+    <mat-form-field>
-        <option *ngFor="let opt of field.data.options" [value]="opt.value">{{opt.label}}</option>
+        <mat-select formControlName="value">
-    </select>
+            <mat-option *ngFor="let opt of field.data.options" [value]="opt.value">{{opt.label}}</mat-option>
+        </mat-select>
+    </mat-form-field>
+
 </div>

dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/dynamic-field-radiobox.component.html

@@ -1,7 +1,9 @@
 <div [formGroup]="form">
+    <mat-radio-group formControlName="value">
         <div *ngFor="let option of this.field.data.options let index = index">
-    <mat-radio-button name="{{field.id}}" [value]="option.value" formControlName="value">{{option.label}}</mat-radio-button>
+        <mat-radio-button [value]="option.value" >{{option.label}}</mat-radio-button>
       </div>
+    </mat-radio-group>  
 </div>
 
 <!-- label="{{option.label}}" -->

dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.html

@@ -1,5 +1,4 @@
-<mat-form-field [id]="field.id" *ngIf="visibilityRulesService.isElementVisible(pathName,field.id)" [formGroup]="form"
+<div [id]="field.id" *ngIf="visibilityRulesService.isElementVisible(pathName,field.id)" [formGroup]="form" [ngSwitch]="field.viewStyle.renderStyle">
-  [ngSwitch]="field.viewStyle.renderStyle">
 
   <h5 *ngIf="field.title">{{field.title}}</h5>
 
@@ -11,7 +10,9 @@
     </h5>
 
     <div *ngSwitchCase="'freetext'">
+      <mat-form-field>
         <input matInput formControlName="value">
+      </mat-form-field>
     </div>
 
     <div *ngSwitchCase="'combobox'">
@@ -22,6 +23,7 @@
       <div *ngIf="this.field.data.type === 'wordlist'">
         <df-dropdown [form]="form" [field]="field"></df-dropdown>
       </div>
+
     </div>
 
     <div *ngSwitchCase="'checkBox'" class="checkbox">
@@ -29,7 +31,13 @@
     </div>
 
     <div *ngSwitchCase="'textarea'">
-      <textarea class="form-control" formControlName="value"> </textarea>
+      <mat-form-field>
+        <textarea matInput formControlName="value" matTextareaAutosize matAutosizeMinRows="2" matAutosizeMaxRows="10"> </textarea>
+        <button mat-button *ngIf="form.get('value').value" matSuffix mat-icon-button aria-label="Clear" (click)="this.form.patchValue({'value': ''})">
+            <mat-icon>close</mat-icon>
+          </button>
+      </mat-form-field>
+
     </div>
 
     <div *ngSwitchCase="'booleanDecision'">
@@ -50,7 +58,7 @@
     </div>
 
   </div>
-</mat-form-field>
+</div>
 
 <!-- <div [formGroup]="form" class="form-group">
 

dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.ts

@@ -27,10 +27,15 @@ export class DynamicFormFieldComponent {
     
     constructor(private route: ActivatedRoute,private visibilityRulesService:VisibilityRulesService) { }
 
+
     ngOnChanges(changeRecord) {
     
     }
 
+    clearInput(){
+debugger;
+    }
+
     get isValid() {
         return this.form.get("value").valid;
     }

dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.ts

@@ -22,7 +22,7 @@ export class DynamicFormCompositeFieldComponent implements OnInit {
   constructor(private visibilityRulesService: VisibilityRulesService) { }
 
   ngOnInit() {
-
+    console.log(this.form);
   }
 
   addMultipleField(fieldIndex: number) {

dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.html

@@ -1,4 +1,5 @@
-<div *ngIf="visibilityRulesService.isElementVisible(pathName,section.id)" class="panel-group" style="margin-top:10px;">
+<!-- Το αφηνω σχόλιο για τεστινγ για να βλεπω αν μου ξεφευγει κάτι -->
+<!-- <div *ngIf="visibilityRulesService.isElementVisible(pathName,section.id)" class="panel-group" style="margin-top:10px;">
     <div class="panel panel-default">
         <div class="panel-heading clearfix">
             <a data-toggle="collapse" href="#{{section.id}}" class="panel-title pull-left" style="padding-top: 7.5px;">{{path}} {{section.title}}</a>
@@ -28,13 +29,13 @@
             </div>
         </div>
     </div>
-</div>
+</div> -->
 
 <!-- <a *ngIf="!form.get('fieldGroups').get(''+i).get('title').value" data-toggle="collapse" href="#{{indexPath + 'g' + i}}" class="panel-title pull-left"
         style="padding-top: 7.5px;">{{i + 1}}. Group {{i + 1}}</a> -->
 <div *ngIf="visibilityRulesService.isElementVisible(pathName,section.id)" class="panel-group" style="margin-top:10px;">
     <mat-accordion>
-        <mat-expansion-panel>
+        <mat-expansion-panel expanded=true>
             <mat-expansion-panel-header>
                 <mat-panel-title>
                     <a data-toggle="collapse" href="#{{section.id}}" class="panel-title pull-left" style="padding-top: 7.5px;">{{path}} {{section.title}}</a>