Merge pull request #449 from topcoderinc/issue-255

fixes issue 255, using textarea for form value input

Author: standlove

src/app/components/add-value-form/add-value-form.component.html

@@ -9,27 +9,17 @@
 
 <div *ngIf="type !== 'String'" class="add-form-list">
   <div class="line" *ngFor="let v of getItemArray(); let i = index">
-    <mat-form-field *ngIf="type === 'List' || type === 'Set' || type === 'Ordered Set'">
-      <input matInput placeholder="Value"
-             (change)="onValueChange()"
-             [(ngModel)]="getItemArray()[i].value">
-    </mat-form-field>
-
-    <mat-form-field *ngIf="type === 'Ordered Set'">
-      <input matInput type="number" placeholder="Score"
-             (change)="onValueChange()"
-             [(ngModel)]="getItemArray()[i].score"
-             type="number">
-    </mat-form-field>
-
     <mat-form-field *ngIf="type === 'Hash Map'" style="flex-grow:0">
-      <input matInput placeholder="Key"
+      <textarea matInput placeholder="Key"
              [readonly]="isEditMode && !v.isNew"
              (change)="onValueChange()"
-             [(ngModel)]="getItemArray()[i].key">
+             [(ngModel)]="getItemArray()[i].key"
+             cdkTextareaAutosize
+             cdkAutosizeMinRows="1"
+             cdkAutosizeMaxRows="7"></textarea>
     </mat-form-field>
 
-    <mat-form-field *ngIf="type === 'Hash Map'">
+    <mat-form-field *ngIf="type === 'List' || type === 'Set' || type === 'Ordered Set' || type === 'Hash Map'">
       <textarea matInput placeholder="Value"
              (change)="onValueChange()"
              [(ngModel)]="getItemArray()[i].value"
@@ -38,6 +28,13 @@
              cdkAutosizeMaxRows="7"></textarea>
     </mat-form-field>
 
+    <mat-form-field *ngIf="type === 'Ordered Set'">
+      <input matInput type="number" placeholder="Score"
+             (change)="onValueChange()"
+             [(ngModel)]="getItemArray()[i].score"
+             type="number">
+    </mat-form-field>
+
     <button mat-icon-button (click)="onRemoveItem(getItemArray(),i)" *ngIf="!isEditMode && getItemArray().length > 1"
             matTooltip="Delete">
       <i class="material-icons delete-icon">delete</i>