angular 没有mat-form-field的matDatepicker

Question

我通过以下方式实现了 matDatepicker：

<div class="container">
  <form [formGroup]="addCarForm" (ngSubmit)="onSubmit()">
    <div class="row">
      <div class="col-lg-6">
          <input class="form-control"> 
      </div>
      <div class="col-lg-6">
          <input matInput [matDatepicker]="picker" placeholder="Choose a date" class="form-control">
          <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-datepicker #picker></mat-datepicker>
      </div>
      </div>
   </form>
</div>

这使得图标强制位于输入字段下方。如何调整使其在输入框的末尾，并使输入框+图标等于col的宽度（看图说明）

我在这里创建了一个问题示例：

https://stackblitz.com/edit/angular-xzkvqc?file=src%2Fapp%2Fapp.component.html

Answer 1

包裹在弹性容器中，这样它们就永远不会错位

<div class="col-lg-6">
  <div style="display:flex"> <!-- wrapping in a flex container -->
    <input matInput [matDatepicker]="picker" placeholder="Choose a date" class="form-control">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </div>
</div>

已更新 Stackblitz https://stackblitz.com/edit/angular-nbupcg

angular 没有mat-form-field的matDatepicker

angular matDatepicker without mat-form-field

angular2-forms

angular