Added input validation

src/components/keymap/header/keymap-header.component.html

@@ -2,11 +2,13 @@
     <h1 class="col-xs-12 pane-title">
         <i class="fa fa-keyboard-o"></i>
         <input #name class="keymap__name pane-title__name"
+               type="text"
                value="{{ keymap.name }}"
                (change)="editKeymapName($event.target.value)"
                (keyup.enter)="name.blur()"
         /> keymap
         (<input #abbr class="keymap__abbrev pane-title__abbrev"
+                type="text"
                 value="{{ keymap.abbreviation }}"
                 (change)="editKeymapAbbr($event.target.value)"
                 (keyup.enter)="abbr.blur()"

src/components/keymap/header/keymap-header.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, ElementRef, Input, Renderer, ViewChild } from '@angular/core';
 
 import { Store } from '@ngrx/store';
 
@@ -14,8 +14,10 @@ import { KeymapActions } from '../../../store/actions';
 })
 export class KeymapHeaderComponent {
     @Input() keymap: Keymap;
+    @ViewChild('name') keymapName: ElementRef;
+    @ViewChild('abbr') keymapAbbr: ElementRef;
 
-    constructor(private store: Store<AppState>) { }
+    constructor(private store: Store<AppState>, private renderer: Renderer) { }
 
     setDefault() {
         if (!this.keymap.isDefault) {
@@ -32,10 +34,20 @@ export class KeymapHeaderComponent {
     }
 
     editKeymapName(name: string) {
+        if (name.length === 0) {
+            this.renderer.setElementProperty(this.keymapName.nativeElement, 'value', this.keymap.name);
+            return;
+        }
+
         this.store.dispatch(KeymapActions.editKeymapName(this.keymap.abbreviation, name));
     }
 
     editKeymapAbbr(newAbbr: string) {
+        if (newAbbr.length !== 3) {
+            this.renderer.setElementProperty(this.keymapAbbr.nativeElement, 'value', this.keymap.abbreviation);
+            return;
+        }
+
         newAbbr = newAbbr.toUpperCase();
         this.store.dispatch(KeymapActions.editKeymapAbbr(this.keymap.abbreviation, newAbbr));
     }

src/components/macro/header/macro-header.component.html

@@ -2,6 +2,7 @@
     <h1 class="col-xs-12 pane-title">
         <i class="fa fa-play"></i>
         <input #macroName class="pane-title__name"
+               type="text"
                value="{{ macro.name }}"
                (change)="editMacroName($event.target.value)"
                (keyup.enter)="macroName.blur()"

src/components/macro/header/macro-header.component.ts

@@ -1,4 +1,7 @@
-import { ChangeDetectionStrategy, Component, ElementRef, Input, Renderer, ViewChild } from '@angular/core';
+import {
+    ChangeDetectionStrategy, Component, ElementRef, Input, OnChanges, Renderer,
+    ViewChild
+} from '@angular/core';
 
 import { Store } from '@ngrx/store';
 
@@ -13,7 +16,7 @@ import { AppState } from '../../../store/index';
     styles: [require('./macro-header.component.scss')],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class MacroHeaderComponent {
+export class MacroHeaderComponent implements OnChanges {
     @Input() macro: Macro;
     @Input() isNew: boolean;
     @ViewChild('macroName') macroName: ElementRef;
@@ -35,6 +38,11 @@ export class MacroHeaderComponent {
     }
 
     editMacroName(name: string) {
+        if (name.length === 0) {
+            this.renderer.setElementProperty(this.macroName.nativeElement, 'value', this.macro.name);
+            return;
+        }
+
         this.store.dispatch(MacroActions.editMacroName(this.macro.id, name));
     }
 }