<form [formGroup]="form">
  <md-input-container>
    <input mdInput formControlName="testControl">
    <md-placeholder>A Test Input Control</md-placeholder>
    <md-hint id="hint" *ngIf="form.controls.testControl.dirty && form.controls.testControl.errors?.pattern">I am hinting</md-hint>
  </md-input-container>
</form>

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-test-md-hint',
  templateUrl: './test-md-hint.component.html',
  styleUrls: ['./test-md-hint.component.css']
})
export class TestMdHintComponent implements OnInit {

  form: FormGroup;

  constructor() { }

  ngOnInit() {

    this.form = new FormGroup({
      testControl: new FormControl(null, [
        Validators.pattern('match-me')
      ])
    });
  }

}

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { NO_ERRORS_SCHEMA, DebugElement } from '@angular/core';
import { By } from '@angular/platform-browser';

import { TestMdHintComponent } from './test-md-hint.component';

describe('TestMdHintComponent', () => {
  let component: TestMdHintComponent;
  let fixture: ComponentFixture<TestMdHintComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [TestMdHintComponent],
      schemas: [NO_ERRORS_SCHEMA]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(TestMdHintComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });


  let form: DebugElement;
  let input: DebugElement;
  let hint: DebugElement;
  beforeEach(() => {
    form = fixture.debugElement.query(By.css('form'));
    input = fixture.debugElement.query(By.css('input'));
    hint = fixture.debugElement.query(By.css('#hint'));
  });

  // passes as expected
  it('finds the input', () => {
    expect(input).not.toBeNull();
    expect(input.nativeElement.getAttribute('formControlName'))
      .toBe('testControl');
  });

  // passes as expected
  it('starts with no hints', () => {
    expect(hint).toBeNull();
  });

  // passes as expected
  it('displays no hint when all is okay', () => {
    input.nativeElement.value = 'match-me';
    input.nativeElement.dispatchEvent(new Event('input'));
    fixture.detectChanges();
    hint = fixture.debugElement.query(By.css('md-hint'));
    expect(hint).toBeNull();
  });

  // fails, not as expected
  it('displays a hint when required', () => {
    input.nativeElement.value = 'no-match';
    input.nativeElement.dispatchEvent(new Event('input'));
    fixture.detectChanges();
    hint = fixture.debugElement.query(By.css('md-hint'));
    expect(hint).not.toBeNull();
  });

});