角度 matDatepicker 没有 mat-form-field答案

【问题标题】：angular matDatepicker without mat-form-field角度 matDatepicker 没有 mat-form-field
【发布时间】：2020-01-16 19:34:38
【问题描述】：

我已经通过以下方式实现了 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

【问题讨论】：

标签： angular angular2-forms

【解决方案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

【讨论】：