Angular中无法为mat-form-field设置display:flex的问题求助

我是Angular新手，正在学习过程中，尝试通过谷歌查找解决方案，但没搞明白为什么无法给<mat-form-field>应用display:flex来达到预期布局。

HTML代码 #

<form [formGroup]="searchForm" (ngSubmit)="onSearch()">

    <mat-card>
        <h4>Case Information</h4>
        <!--  -->
        <mat-form-field>
            <label for="case-type">Case Type</label>
            <mat-select id="case-type" type="text" formControlName="caseType">
                <mat-option value="opt1">option1</mat-option>
            </mat-select>
        </mat-form-field>
        <!--  -->
        <mat-form-field>
            <label for="document-type">Document Type</label>
            <mat-select id="document-type" type="text" formControlName="documentType">
                <mat-option value="opt1">option1</mat-option>
            </mat-select>
        </mat-form-field>
        <!--  -->
        <mat-form-field>
            <label for="receipt-from-date">Receipt Date (from)</label>
            <input id="receipt-from-date" formControlName="receiptFromDate" matInput [matDatepicker]="picker">
            <mat-hint>MM/DD/YYYY</mat-hint>
            <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker #picker></mat-datepicker>
        </mat-form-field>
        <!--  -->
        <mat-form-field>
            <label for="fed-id">Federal ID #</label>
            <input id="fed-id" type="text" formControlName="federalIdNumber" matNativeControl>
        </mat-form-field>
        <!--  -->
        <mat-form-field>
            <label for="document-number">Document #</label>
            <input id="document-number" type="text" formControlName="documentNumber" matNativeControl>
        </mat-form-field>
    </mat-card>

    <mat-card>
        <h4>Invoice Information</h4>
        <!--  -->
        <mat-form-field>
            <label for="invoice-number">Invoice #</label>
            <input id="invoice-number" type="text" formControlName="invoiceNumber" matNativeControl>
        </mat-form-field>
        <!--  -->
        <mat-form-field>
            <label for="invoice-date">Invoice Date</label>
            <input id="invoice-date" formControlName="invoiceDate" matInput [matDatepicker]="picker">
            <mat-hint>MM/DD/YYYY</mat-hint>
            <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker #picker></mat-datepicker>
        </mat-form-field>
        <!--  -->
        <mat-form-field>
            <label for="invoice-amount">Invoice Amount ($)</label>
            <input id="invoice-amount" type="text" formControlName="invoiceAmount" matNativeControl>
        </mat-form-field>
    </mat-card>

    <div class="form-actions">
        <button mat-raised-button class="form-action-button" color="warn" type="submit">Search</button>
        <button mat-stroked-button class="form-action-button" (click)="onReset()">Reset</button>
    </div>
</form>

SCSS代码 #

mat-form-field {
    display: flex;
    flex-direction: column;
}

当前效果 #

预期效果 #

我试过设置display:flex和flex-direction:column，也调整过div结构，但都没效果，求帮助。

你错在给<mat-form-field>自身设置display:flex，实际上需要给表单域的父容器添加flex布局，让这些表单域横向排列。

Angular Material的<mat-form-field>默认是块级元素，会独占一行，所以要实现并排效果，按以下步骤修改：

1. 给每个<mat-card>内的表单域包裹一个容器div，添加类名form-row：

<mat-card>
    <h4>Case Information</h4>
    <div class="form-row">
        <mat-form-field>...</mat-form-field>
        <mat-form-field>...</mat-form-field>
        <!-- 所有Case Information下的表单域都放到这个div里 -->
    </div>
</mat-card>

<mat-card>
    <h4>Invoice Information</h4>
    <div class="form-row">
        <mat-form-field>...</mat-form-field>
        <mat-form-field>...</mat-form-field>
        <!-- 所有Invoice Information下的表单域都放到这个div里 -->
    </div>
</mat-card>

2. 在SCSS中给form-row设置flex布局：

.form-row {
    display: flex;
    gap: 1.5rem; /* 控制表单域之间的间距，可按需调整 */
    flex-wrap: wrap; /* 屏幕宽度不足时自动换行，适配响应式 */
}

/* 可选：让表单域平分容器宽度，或设置固定宽度 */
.form-row mat-form-field {
    flex: 1; /* 每个表单域均分可用空间 */
    min-width: 220px; /* 设置最小宽度，避免缩得太窄 */
    /* 也可以用固定宽度：width: 250px; */
}

/* 移除之前给mat-form-field设置的flex样式，避免破坏内部布局 */
mat-form-field {
    /* 删掉display: flex; flex-direction: column; */
}

关键说明 #

• <mat-form-field>内部有Angular Material预设的布局结构（标签、输入框、提示文本等层级），修改它的display属性会打乱原有样式，所以不要给它设置display:flex。
• 通过父容器的flex布局来控制表单域的排列方式，是Angular Material表单布局的标准做法。

内容的提问来源于stack exchange，提问作者shabbir katlariwala