Использование mat-form-field в диалоговых окнах mat-toolbar

Question

У меня есть диалог, который я наконец получил в Angular 7 с последним материалом.Мне нужна панель инструментов mat в качестве заголовка диалога, а затем я пытаюсь использовать средство выбора owlDateTime, чтобы диапазон дат был частью диалога.Если я просто использую поля меток / ввода, панель инструментов циновки продолжает правильно отображаться.Но если я окружаю ввод / метку полем mat-form, чтобы получить хороший стиль, панель инструментов ломается.Он не отображает переменную заголовка, переданную в компонент, и стилизация нарушена.Вот снимок панели инструментов, работающей с не очень хорошим средством выбора даты / времени:

А вот изображение, когда я оборачиваю поле выбора даты / времени матовым полем формы.Вот HTML работает:

и не работает:

Вот HTML-код панели инструментовработает:

<mat-toolbar color="primary">
    <h2 mat-dialog-title>{{title}}</h2>
    <span class="flex-spacer"></span>
    <button mat-button mat-dialog-close >&times;</button>

</mat-toolbar>

      <label>Date/Time Range
        <input [owlDateTimeTrigger]="dt10" [owlDateTime]="dt10"
               [selectMode]="'range'" style="width: 70%">
        <owl-date-time #dt10></owl-date-time>
      </label>

  <mat-dialog-actions align="center">
    <button class="mat-raised-button"(click)="close()">Close</button>
    <button class="mat-raised-button mat-primary"(click)="save()">Save</button>
  </mat-dialog-actions>

И поле формы работает:

<mat-toolbar color="primary">
    <h2 mat-dialog-title>{{title}}</h2>
    <span class="flex-spacer"></span>
    <button mat-button mat-dialog-close >&times;</button>

</mat-toolbar>

<mat-form-field>

      <label>Date/Time Range
        <input [owlDateTimeTrigger]="dt10" [owlDateTime]="dt10"
               [selectMode]="'range'" style="width: 70%">
        <owl-date-time #dt10></owl-date-time>
      </label>
</mat-form-field>

  <mat-dialog-actions align="center">
    <button class="mat-raised-button"(click)="close()">Close</button>
    <button class="mat-raised-button mat-primary"(click)="save()">Save</button>
  </mat-dialog-actions>

Почему поле формы мата так отрицательно влияет на панель инструментов?Есть ли способ заставить их играть хорошо или мне придется возиться с css, чтобы стилизовать ввод так, как я хочу?

Спасибо .....

Answer 1

Вы должны использовать компоненты mat-dialog-title и mat-dialog-content.См. https://material.angular.io/components/dialog/api#MatDialogContent, это поможет вам правильно выстроиться в очередь.