title: Placeholder input text not showing up in angular
body: <p>The placeholder is not showing up instead of defining them.
  I have defined input for emails and priorities, but when I run ng serve and open the page the input fields are missing. </p>
  
  <p>I have already checked if any of my modules are missing or not, it seems totally fine.
  I also referred to the official documentation and cross checked my code.</p>
  
  <p>html file</p>
  
  <pre><code>&lt;mat-horizontal-stepper [linear]="true" #stepper&gt;
    &lt;mat-step [stepControl]="firstFormGroup"&gt;&lt;/mat-step&gt;
      &lt;form [formGroup]="firstFormGroup"&gt;
        &lt;ng-template matStepLabel&gt;Enter recipient info&lt;/ng-template&gt;
        &lt;mat-form-field&gt;
          &lt;input matInput placeholder="Email" formControlName="emailCtrl" required&gt;
        &lt;/mat-form-field&gt;
        &lt;mat-form-field&gt;
          &lt;input type="text" formControlName= "priorityCtrl" placeholder="Priority" matInput [matAutocomplete]= "auto" required&gt;
          &lt;mat-autocomplete autoActiveFirstOption #auto="matAutocomplete"&gt;
            &lt;mat-option *ngFor="let priority of priorties" [value]= "priority"&gt;
              {{priority}}
            &lt;/mat-option&gt;
          &lt;/mat-autocomplete&gt;
        &lt;/mat-form-field&gt;
        &lt;div&gt;
            &lt;button mat-icon-button matStepperNext&gt;
                &lt;mat-icon&gt;arrow_forward&lt;/mat-icon&gt;
            &lt;/button&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;mat-step [stepControl]="secondFormGroup"&gt;
      &lt;form [formGroup]="secondFormGroup"&gt;
        &lt;mat-form-field&gt;
          &lt;input matInput placeholder="Message" formControlName="messageCtrl" required&gt;
        &lt;/mat-form-field&gt;
        &lt;div&gt;
          &lt;button mat-icon-button matStepperPrevious&gt;
            &lt;mat-icon&gt;arrow_back&lt;/mat-icon&gt;
          &lt;/button&gt;
          &lt;button mat-icon-button matStepperNext&gt;
            &lt;mat-icon&gt;mail_outline&lt;/mat-icon&gt;
          &lt;/button&gt; 
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/mat-step&gt;
    &lt;mat-step [optional]="true"&gt;
      &lt;ng-template matStepLabel&gt;Preview&lt;/ng-template&gt;
      &lt;p&gt;Message Sent!&lt;/p&gt;
      &lt;div&gt;
          &lt;button mat-icon-button matStepperPrevious&gt;
              &lt;mat-icon&gt;arrow_back&lt;/mat-icon&gt;
            &lt;/button&gt;
            &lt;button mat-icon-button (click)="stepper.reset()"&gt;
              &lt;mat-icon&gt;refresh&lt;/mat-icon&gt;
            &lt;/button&gt;
      &lt;/div&gt;
    &lt;/mat-step&gt;
  &lt;/mat-horizontal-stepper&gt;
  </code></pre>
  
  <p>This is my ts file</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
  
  @Component({
    selector: 'app-message-new',
    templateUrl: './message-new.component.html',
    styleUrls: ['./message-new.component.scss']
  })
  export class MessageNewComponent implements OnInit {
    firstFormGroup: FormGroup;
    secondFormGroup: FormGroup;
  
    priorites: string[] = ['High', 'Medium', 'Low'];
    departments: object[] = [
      {
        id: 1,
        name: 'Complaints'
      },
      {
        id: 1,
        name: 'Loyalty'
      },
      {
        id: 1,
        name: 'Promotions'
      }
    ]
  
    constructor(private formBuilder: FormBuilder) { }
  
    ngOnInit() {
  
      this.firstFormGroup = this.formBuilder.group({
        emailCtrl: ['', Validators.required],
        priorityCtrl: ['', Validators.required]
      });
      this.secondFormGroup = this.formBuilder.group({
        messageCtrl: ['', Validators.required]
      });
    }
  }
  </code></pre>