Question

我有一个带有两个日期选择器的表单，如下所示：

<div fxLayout="row wrap" fxLayoutGap="10px">
  <mat-form-field appearance="outline" fxFlex>
    <mat-label>Choose a date</mat-label>
    <input matInput [matDatepicker]="picker">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
  <mat-form-field appearance="outline" fxFlex>
    <mat-label>Choose a date</mat-label>
    <input matInput [matDatepicker]="picker2">
    <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
    <mat-datepicker #picker2></mat-datepicker>
  </mat-form-field>
</div>

我想添加一个我创建的垫选择组件，以便像这样重复使用：

<div fxLayout="row" fxLayoutGap="10px">
  <custom-select [formGroup]="formGroup"></custom-select> //---Custom Field
  <mat-form-field appearance="outline" fxFlex>
    <mat-label>Choose a date</mat-label>
    <input matInput [matDatepicker]="picker">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
  <mat-form-field appearance="outline" fxFlex>
    <mat-label>Choose a date</mat-label>
    <input matInput [matDatepicker]="picker2">
    <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
    <mat-datepicker #picker2></mat-datepicker>
  </mat-form-field>
</div>

执行此操作时，我的自定义组件看起来并不遵循表单的flex规则。我试图将fxFlex添加到表单组件中，如下所示：

<custom-select fxFlex [formGroup]="formGroup"></custom-select>

它更适合在屏幕上显示，但是如果您缩小屏幕尺寸，则该字段会变得很小，甚至无法读取mat标签或任何内容。它不会像其他人一样跳到上一行。

我的自定义垫选择如下：

<div [formGroup]="formGroup" fxFlex>
  <mat-form-field appearance="outline" fxFlex>
     <mat-label>Location</mat-label>
     <mat-select>
       <mat-option>....</mat-option>
     </mat-select>
  </mat-form-field>
</div>

Angular子级从父级继承Flex

0 个答案: