angular - 占位符输入文本未以角度显示

Question

占位符没有显示而不是定义它们。我已经为电子邮件和优先级定义了输入，但是当我运行 ng serve 并打开页面时，输入字段丢失了。

我已经检查过我的任何模块是否丢失，看起来完全没问题。我还参考了官方文档并交叉检查了我的代码。

.html 文件

<mat-horizontal-stepper [linear]="true" #stepper>
  <mat-step [stepControl]="firstFormGroup"></mat-step>
    <form [formGroup]="firstFormGroup">
      <ng-template matStepLabel>Enter recipient info</ng-template>
      <mat-form-field>
        <input matInput placeholder="Email" formControlName="emailCtrl" required>
      </mat-form-field>
      <mat-form-field>
        <input type="text" formControlName= "priorityCtrl" placeholder="Priority" matInput [matAutocomplete]= "auto" required>
        <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
          <mat-option *ngFor="let priority of priorties" [value]= "priority">
            {{priority}}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
      <div>
          <button mat-icon-button matStepperNext>
              <mat-icon>arrow_forward</mat-icon>
          </button>
      </div>
    </form>
  <mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
      <mat-form-field>
        <input matInput placeholder="Message" formControlName="messageCtrl" required>
      </mat-form-field>
      <div>
        <button mat-icon-button matStepperPrevious>
          <mat-icon>arrow_back</mat-icon>
        </button>
        <button mat-icon-button matStepperNext>
          <mat-icon>mail_outline</mat-icon>
        </button> 
      </div>
    </form>
  </mat-step>
  <mat-step [optional]="true">
    <ng-template matStepLabel>Preview</ng-template>
    <p>Message Sent!</p>
    <div>
        <button mat-icon-button matStepperPrevious>
            <mat-icon>arrow_back</mat-icon>
          </button>
          <button mat-icon-button (click)="stepper.reset()">
            <mat-icon>refresh</mat-icon>
          </button>
    </div>
  </mat-step>
</mat-horizontal-stepper>

这是我的 ts 文件

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]
    });
  }
}

标签： angularplaceholder