Заполнитель вводимого текста не отображается под углом - PullRequest
Новая
       17

Заполнитель вводимого текста не отображается под углом

0 голосов
/ 31 мая 2019

Заполнитель не отображается вместо определения их. Я определил ввод для писем и приоритетов, но когда я запускаю 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]
    });
  }
}
...