为什么我无法在 Angular 中使用显示 Flex？

Question

我是 Angular 的新手，我只是在探索。我已经尝试过谷歌和更多，但我没有找到为什么我无法在

<mat-form-field>

中应用显示柔性的答案

这是我的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;
}

请不要采取消极态度，因为我是 Angular 的新手并且陷入了项目

我的输出：

期待输出

我尝试过显示：flex;flex-direction:column;并在 div 中进行更改但不起作用。

Answer 1

以下链接已模拟您想要的内容。

matformfields 中的

appearance="outline" 适用于边框。

stackblitz 示例