如何在Angular mat表格中将“搜索”框对齐到右侧？

Question

我正在使用mat-card，让add按钮和search框水平对齐在同一行上。 我想让add在左边，而search在右边。

我已经写好以下的html，但是search没有对齐到右边。

<div class="page-container">
    <mat-card class="mat-elevation-z3">
        <mat-card-title>Test Data</mat-card-title>
        <form layout-align='center center' layout='column'>
            <mat-form-field style="justify-content: flex-start">
                <button  mat-raised-button (click)="addClick()" color="primary" mat-raised-button>
                    <mat-icon>add_box</mat-icon>Add
                </button>
            </mat-form-field>
            <mat-form-field style="justify-content: flex-end">
                <input (keyup)="doFilter($event.target.value)" matInput placeholder="Search" type="text">
            </mat-form-field>
        </form>
    </mat-card>
</div>

我也遇到了一个错误 - 错误：mat-form-field必须包含MatFormFieldControl。

- meallhour

Answer 1

• 首先，您正在尝试使用 flexbox，但没有声明 flex 容器。

• 您需要为父元素添加 display: flex，使其子元素成为 flex 元素。

• 要将您的 search 框对齐到最右侧，您可以使用 margin-left: auto。

<div class="page-container">
    <mat-card class="mat-elevation-z3">
        <mat-card-title>Test Data</mat-card-title>
        <form layout-align='center center' layout='column' style="display: flex">
            <mat-form-field>
                <button  mat-raised-button (click)="addClick()" color="primary" mat-raised-button>
          <mat-icon>add_box</mat-icon>Add
        </button>
            </mat-form-field>
            <mat-form-field style="margin-left: auto">
                <input (keyup)="doFilter($event.target.value)" matInput placeholder="Search" type="text">
      </mat-form-field>
        </form>
    </mat-card>
</div>

为了解决您的第二个问题，您可以直接按照官方故障排除说明进行操作：

instruction：

错误：mat-form-field必须包含MatFormFieldControl

当您未向表单字段添加表单字段控件时，就会出现此错误。如果您的表单字段包含原生的 <input> 或 <textarea> 元素，请确保已将matInput指令添加到其中，并已导入MatInputModule。

- UkFLSUI