#153007815 reactive forms input (#92)

* testar reactive forms input * litet exempel klar * fixat klart reactive form input * updaterat version 0.3.3-rc24" * ändrat text * updaterat version 0.3.3-rc33
Vastra-Gotalandsregionen · Dec 5, 2017 · f982ce7 · f982ce7
1 parent d421277
commit f982ce7
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 199 deletions.
diff --git a/component-package/controls/index.ts b/component-package/controls/index.ts
@@ -22,7 +22,6 @@ export { ModalPlaceholderComponent } from './modal/modal.component';
 export { MonthpickerComponent } from './monthpicker/monthpicker.component';
 export { DatepickerComponent } from './datepicker/datepicker.component';
 export { InputComponent } from './input/input.component';
-export { InputNewComponent } from './input-new/input-new.component';
 export { CardSectionComponent } from './card/cardSection.component';
 export { TitleValueComponent } from './titleValue/titleValue.component';
 export { LoaderComponent } from './loader/loader.component';

diff --git a/component-package/controls/input-new/input-new.component.html b/component-package/controls/input-new/input-new.component.html
diff --git a/component-package/controls/input/input.component.html b/component-package/controls/input/input.component.html
@@ -3,7 +3,7 @@
   }">
 
   <div class="input-container">
-    <input type="text" #inputTextBox class="input-container__textbox" (blur)="onBlur()" (focus)="onFocus()" [ngModel]="value"
+    <input type="text" #inputTextBox class="input-container__textbox" (blur)="onBlur($event)" (focus)="onFocus()" [ngModel]="value"
       (ngModelChange)="onChange($event)" [maxlength]="maxlength" [attr.readonly]="readonly ? '' : null">
     <div class="input-container__suffix-container">
       <div class="input-container__suffix-container__suffix">{{suffix}}</div>

diff --git a/component-package/controls/input/input.component.ts b/component-package/controls/input/input.component.ts
@@ -5,90 +5,90 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { concat } from 'rxjs/observable/concat';
 
 @Component({
-    selector: 'vgr-input',
-    moduleId: module.id,
-    templateUrl: './input.component.html',
+  selector: 'vgr-input',
+  moduleId: module.id,
+  templateUrl: './input.component.html',
 
-    providers: [{
-        provide: NG_VALUE_ACCESSOR,
-        useExisting: forwardRef(() => InputComponent),
-        multi: true
-    }]
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => InputComponent),
+    multi: true
+  }]
 
 })
 export class InputComponent implements ControlValueAccessor {
-    @Input() isInvalid: boolean;
-
-    @Input() @HostBinding('class.readonly') readonly?: boolean;
-    @Input() @HostBinding('class.input--small') small: boolean;
-    @Input() @HostBinding('class.align-right') alignRight: boolean;
-
-    @Input() suffix: string;
-    @Input() value: any;
-    @Input() maxlength?: number;
-    @Input() errormessage: string;
-
-    @Output() blur: EventEmitter<any>;
-    @Output() focus: EventEmitter<any>;
-
-    @HostBinding('class.validated-input') hasClass = true;
-    @HostBinding('class.validation-error--active') get errorClass() {
-        return this.touched && this.isInvalid && !this.hasFocus;
-    }
-    @HostBinding('class.validation-error--editing') get editingClass() {
-        return this.touched && this.isInvalid && this.hasFocus;
-    }
-    @HostBinding('class.validation-error--fixed') get fixedClass() {
-        return this.invalidOnFocus && this.touched && !this.isInvalid && !this.hasFocus;
+  @Input() isInvalid: boolean;
+
+  @Input() @HostBinding('class.readonly') readonly?: boolean;
+  @Input() @HostBinding('class.input--small') small: boolean;
+  @Input() @HostBinding('class.align-right') alignRight: boolean;
+
+  @Input() suffix: string;
+  @Input() value: any;
+  @Input() maxlength?: number;
+  @Input() errormessage: string;
+
+  @Output() blur: EventEmitter<any>;
+  @Output() focus: EventEmitter<any>;
+
+  @HostBinding('class.validated-input') hasClass = true;
+  @HostBinding('class.validation-error--active') get errorClass() {
+    return this.touched && this.isInvalid && !this.hasFocus;
+  }
+  @HostBinding('class.validation-error--editing') get editingClass() {
+    return this.touched && this.isInvalid && this.hasFocus;
+  }
+  @HostBinding('class.validation-error--fixed') get fixedClass() {
+    return this.invalidOnFocus && this.touched && !this.isInvalid && !this.hasFocus;
+  }
+
+  control: AbstractControl;
+  hasFocus = false;
+  touched = false;
+  invalidOnFocus = false;
+
+  constructor() {
+    this.blur = new EventEmitter<any>();
+    this.focus = new EventEmitter<any>();
+  }
+
+  writeValue(value: any) {
+    if (value !== undefined) {
+      this.value = value;
     }
+  }
 
-    control: AbstractControl;
-    hasFocus = false;
-    touched = false;
-    invalidOnFocus = false;
+  registerOnChange(fn: any) {
+    this.onChange = fn;
+  }
 
-    constructor() {
-        this.blur = new EventEmitter<any>();
-        this.focus = new EventEmitter<any>();
-    }
+  registerOnTouched(fn: any) {
+    this.onTouched = fn;
+  }
 
-    writeValue(value: any) {
-        if (value !== undefined) {
-            this.value = value;
-        }
-    }
+  onChange(input: any) {
+    this.value = input;
+  }
 
-    registerOnChange(fn: any) {
-        this.onChange = fn;
-    }
-
-    registerOnTouched(fn: any) {
-        this.onTouched = fn;
-    }
+  onTouched() {
+  }
 
-    onChange(input: any) {
-        this.value = input;
+  onBlur(): void {
+    if (this.readonly) {
+      return;
     }
 
-    onTouched() {
-    }
-
-    onBlur(): void {
-        if (this.readonly) {
-            return;
-        }
-
-        this.touched = true;
-        this.hasFocus = false;
-        this.blur.emit(event);
-    }
+    this.touched = true;
+    this.hasFocus = false;
+    this.blur.emit(event);
+  }
 
-    onFocus(): void {
-        if (this.readonly) {
-            return;
-        }
-        this.invalidOnFocus = this.isInvalid && this.touched;
-        this.hasFocus = true;
-        this.focus.emit(event);
+  onFocus(): void {
+    if (this.readonly) {
+      return;
     }
+    this.invalidOnFocus = this.isInvalid && this.touched;
+    this.hasFocus = true;
+    this.focus.emit(event);
+  }
 }
diff --git a/component-package/komponentkartan.module.ts b/component-package/komponentkartan.module.ts
@@ -55,7 +55,6 @@ const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
         control.MonthpickerComponent,
         control.DatepickerComponent,
         control.InputComponent,
-        control.InputNewComponent,
         control.CardComponent,
         control.CardHeaderComponent,
         control.CardColumnComponent,
@@ -98,7 +97,6 @@ const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
         control.MonthpickerComponent,
         control.DatepickerComponent,
         control.InputComponent,
-        control.InputNewComponent,
         control.CardComponent,
         control.CardHeaderComponent,
         control.CardColumnComponent,

diff --git a/demo-app/inputFields/inputFields.component.html b/demo-app/inputFields/inputFields.component.html
@@ -4,8 +4,6 @@
       <h2>Åtgärder</h2>
       <vgr-button (click)="headerExpanded = !headerExpanded">Öppna</vgr-button>
     </div>
-
-
   </vgr-page-header>
   <vgr-action-panel [expanded]="headerExpanded">
     <h1>Some content</h1>
@@ -15,11 +13,8 @@ <h1>Some content</h1>
       <vgr-radio-group [options]="[{id:'1', displayName:'Stor', selected:true},{id:'2', displayName:'Liten'}]" (selectedChanged)="toggleInputType($event)">
       </vgr-radio-group>
       <form [formGroup]="form">
-
         <div class="row-layout">
           <div class="one-third">
-
-
             <h2>Fördefinierade typer</h2>
             <div>
               Belopp 1 (type=amount)
@@ -104,105 +99,6 @@ <h2>Validering med service</h2>
           </div>
         </div>
       </form>
-      <div class="row-layout">
-        <div class="full">
-          <h2>Notera</h2>
-          <ul>
-            <li>
-              Validering sker alltid när man lämnar fältet (onblur)
-            </li>
-            <li>
-              Om man anger pattern blir fältet automatiskt obligatoriskt.
-            </li>
-            <li>
-              För numeriska fält (numeric, amount, km, percent) uppdateras värdet till NaN om fältet inte kan tolkas som ett giltigt värde
-            </li>
-
-            <li>
-              Om pattern anger ett maximalt antal tecken, sätt även [maxlength] för att spärra fältet för längre inmatning
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="row-layout">
-        <div class="full">
-          <h2>Konfiguration</h2>
-          <table class="property-table">
-            <tr>
-              <th>Property</th>
-              <th>Beskrivning</th>
-              <th>Exempel</th>
-            </tr>
-            <tr>
-              <td>[value]</td>
-              <td>Värde att binda till</td>
-              <td>[value]="person.lastName"</td>
-            </tr>
-            <tr>
-              <td>[validateOnInit]</td>
-              <td>Om true, validera värdet vid laddning av sidan. Default = false.</td>
-              <td>[validateOnInit]="true"</td>
-            </tr>
-            <tr>
-              <td>(valueChanged)</td>
-              <td>Event när värdet ändras. Triggas när fokus lämnar fältet. Värdet är parameter.</td>
-              <td>(valueChanged)="person.lastName = $event"</td>
-            </tr>
-            <tr>
-              <td>[title]</td>
-              <td>Tool-tip vid hover. Default = tomt.</td>
-              <td>[title]="'Fyll i ditt namn här'"</td>
-            </tr>
-            <tr>
-              <td>[maxlength]</td>
-              <td>Max antal tecken. Begränsar antalet möjliga tecken att mata in. Default = obegränsat.</td>
-              <td>[maxlength]="5"</td>
-            </tr>
-            <tr>
-              <td>[required]</td>
-              <td>Om true, är fältet obligatoriskt, annars skapas valideringsfel. Default = false</td>
-              <td>[required]="true"</td>
-            </tr>
-            <tr>
-              <td>[pattern]</td>
-              <td>Regex att matcha innehållet mot vid validering. Default = tomt</td>
-              <td>[pattern]="[a-z,A-Z]+'" (Minst en bokstav)</td>
-            </tr>
-            <tr>
-              <td>[invalidtext]</td>
-              <td>Text som visas vid valideringsfel för pattern eller om obligatoriskt fält ej fyllts i</td>
-              <td>[invalidtext]="'Ange ett värde mellan 1-10'"</td>
-            </tr>
-            <tr>
-              <td>[suffix]</td>
-              <td>Text som visas till höger om fältet, som t.ex en enhet (km, m, kg, kr mm)</td>
-              <td>[suffix]="'kg'"</td>
-            </tr>
-            <tr>
-              <td>[alignRight]</td>
-              <td>Om true, högerställ innehållet i fältet. Default är False.</td>
-              <td>[alignRight]="true"</td>
-            </tr>
-            <tr>
-              <td>[type]</td>
-              <td>Fördefinierade typer av färdig validering samt suffix. Gltiga värden är amount, kg, percent, numeric. Sätter
-                pattern, högerställer samt formatterar värdet. Inställningar möjliga att skriva över med enstaka properties
-                ovan.
-              </td>
-              <td>[type]="'amount'"</td>
-            </tr>
-            <tr>
-              <td>[customValidator]</td>
-              <td>En egendefinierad funktion som returnerar validering baserat på innehållet. Anropas när fokus lämnar fältet.
-                Funktionen tar in en sträng och returnerar ett IValidationResult med resultat samt meddelande. Se "Validering
-                med service" ovan. Notera anropet med [funktion].bind(this).
-              </td>
-              <td>[customValidator]="validateCityName.bind(this)"</td>
-            </tr>
-          </table>
-        </div>
-      </div>
     </vgr-page-block>
   </vgr-page-body>
-
 </vgr-page>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vgr-komponentkartan",
-  "version": "0.3.3-rc32",
+  "version": "0.3.3-rc33",
   "author": "Västra Götalandsregionen",
   "scripts": {
     "start": "concurrent \"npm run _watch-ts\" \"npm run _local-webserver\" \"npm run _watch-css\" \"npm run _watch-demo-app-css\"",