title: Angular Material form-field outline input color change when the form-field is active
body: <p>Problem Statement:
  I am implementing Angular material <code>mat-form-field</code> property. I put Form field appearance as a outline. I am trying to change the color of the input border when the input is selected.</p>
  
  <p>Expected Behaviour.
  The input field outline border color should change when the input is selected. I want to change the color of the outline into black when the form-field is active.</p>
  
  <p>Current Behavior:
  Right now it's showing the angular material default primary color when the form field is active.</p>
  
  <p><a href="https://i.stack.imgur.com/lXcHn.png" rel="noreferrer"><img src="https://i.stack.imgur.com/lXcHn.png" alt="enter image description here"></a></p>
  
  <p>This are all my dependency</p>
  
  <pre><code>{
    "dependencies": {
      "@angular/animations": "^6.1.9",
      "@angular/cdk": "^6.4.7",
      "@angular/common": "^6.1.0",
      "@angular/compiler": "^6.1.0",
      "@angular/core": "^6.1.0",
      "@angular/forms": "^6.1.0",
      "@angular/http": "^6.1.0",
      "@angular/material": "^6.4.7",
      "@angular/platform-browser": "^6.1.0",
      "@angular/platform-browser-dynamic": "^6.1.0",
      "@angular/router": "^6.1.0",
      "aws-amplify": "^1.1.6",
      "core-js": "^2.5.4",
      "hammerjs": "^2.0.8",
      "rxjs": "~6.2.0",
      "zone.js": "~0.8.26"
    },
    "devDependencies": {
      "@angular-devkit/build-angular": "~0.8.0",
      "@angular/cli": "~6.2.3",
      "@angular/compiler-cli": "^6.1.0",
      "@angular/language-service": "^6.1.0",
      "@types/jasmine": "~2.8.8",
      "@types/jasminewd2": "~2.0.3",
      "@types/node": "~8.9.4",
      "codelyzer": "~4.3.0",
      "jasmine-core": "~2.99.1",
      "jasmine-spec-reporter": "~4.2.1",
      "karma": "~3.0.0",
      "karma-chrome-launcher": "~2.2.0",
      "karma-coverage-istanbul-reporter": "~2.0.1",
      "karma-jasmine": "~1.1.2",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~5.4.0",
      "ts-node": "~7.0.0",
      "tslint": "~5.11.0",
      "typescript": "~2.9.2"
    }
  }
  </code></pre>