feat(textfield): Add empty getter (#451)

Add empty() property to check if value is empty and isBadInput is false
trimox · Dec 12, 2017 · 4c6124d · 4c6124d
1 parent eaf2c17
commit 4c6124d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/src/lib/textfield/text-field.ts b/src/lib/textfield/text-field.ts
@@ -224,6 +224,12 @@ export class MdcTextField implements AfterViewInit, OnDestroy, ControlValueAcces
   get valid(): boolean {
     return this.inputText.nativeElement.validity.valid;
   }
+
+  /** Whether the control is empty. */
+  get empty(): boolean {
+    return !this.elementRef.nativeElement.value && !this.isBadInput();
+  }
+
   @HostBinding('class.mdc-text-field--dense') get classDense(): string {
     return this.dense ? 'mdc-text-field--dense' : '';
   }
@@ -294,7 +300,8 @@ export class MdcTextField implements AfterViewInit, OnDestroy, ControlValueAcces
   }
 
   isBadInput(): boolean {
-    return this.inputText.nativeElement.validity.badInput;
+    const validity = (this.elementRef.nativeElement as HTMLInputElement).validity;
+    return validity && validity.badInput;
   }
 
   focus(): void {

diff --git a/test/unit/textfield/textfield.test.ts b/test/unit/textfield/textfield.test.ts
@@ -60,6 +60,11 @@ describe('MdcTextField', () => {
       expect(textFieldInstance.isDisabled()).toBe(false);
     });
 
+    it('#should not be empty', () => {
+      fixture.detectChanges();
+      expect(textFieldInstance.empty).toBe(true);
+    });
+
     it('#should remove invalid styling', () => {
       fixture.detectChanges();
       textFieldInstance.setValid(false);