html - 如何在 Angular 垫表中将 'search' 框对齐到右侧？

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。

Answer 1

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

• 您需要将display: flex 添加到父元素，以便其子元素成为flex 元素。

• 要将您的搜索框对齐到最右边，您可以使用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 :

Error: mat-form-field must contain a MatFormFieldControl

This error occurs when you have not added a form field control to your formfield. If your form field contains a native or element, make sure you've added the matInput directive to it and haveimported MatInputModule.