[ADF-3499] Make Card View Text Item reactive to user input

Alfresco · Aug 5, 2020 · 17f672b · 17f672b
1 parent 1dec2ba
commit 17f672b
Show file tree

Hide file tree

Showing 4 changed files with 446 additions and 355 deletions.
diff --git a/lib/core/card-view/card-view.module.ts b/lib/core/card-view/card-view.module.ts
@@ -17,7 +17,7 @@
 
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -50,6 +50,7 @@ import { CardViewArrayItemComponent } from './components/card-view-arrayitem/car
     imports: [
         CommonModule,
         FormsModule,
+        ReactiveFormsModule,
         FlexLayoutModule,
         TranslateModule,
         MatDatepickerModule,

diff --git a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html
@@ -13,9 +13,8 @@
                    *ngIf="!property.multiline"
                    class="adf-property-value"
                    [placeholder]="property.default"
-                   [(ngModel)]="editedValue"
-                   (blur)="update()"
-                   (keydown.enter)="update()"
+                   [value]="editedValue"
+                   [formControl]="textInput"
                    [disabled]="!isEditable"
                    (dblclick)="copyToClipboard(property.displayValue)"
                    matTooltipShowDelay="1000"
@@ -29,9 +28,7 @@
                       matAutosizeMaxRows="5"
                       class="adf-property-value"
                       [placeholder]="property.default"
-                      [(ngModel)]="editedValue"
-                      (blur)="update()"
-                      (keydown.enter)="update()"
+                      [formControl]="textInput"
                       [disabled]="!isEditable"
                       [attr.data-automation-id]="'card-textitem-value-' + property.key"></textarea>
             <button mat-button