时间戳

首页 > 解决方案 > 角度 matDatepicker 没有 mat-form-field

angular - 角度 matDatepicker 没有 mat-form-field

问题描述

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

标签： angularangular2-forms

解决方案

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

<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

推荐阅读