Angular Material Forms 和 Flex 布局 - 在所有行中获得相同的输入宽度

Question

只是我的 Angular Material Form 遇到了一点 FlexLayout 格式问题。

我的名字和姓氏输入应从头到尾覆盖整行，以便姓氏输入的左端和名字输入的右端垂直于电子邮件输入的相应端。

我怎样才能让它发挥作用？基本上我只是希望它们与其他表单输入具有匹配的宽度。

它们不是匹配的“行换行”宽度，而是非常小

这是它在移动设备上的样子，同样，名字和姓氏太小

我使用 FlexLayout 和 Angular Material 组件库来实现这一切。我只是不熟悉如何以有效的方式设置弹性盒的有用部分。

以下是相关代码，在此 component.html 文件之外没有应用任何重要的样式或布局功能。

<mat-card fxLayoutAlign="center center">
    <div *ngIf="isLoading">
        <app-loading-spinner></app-loading-spinner>
    </div>
    <div *ngIf="!isLoading">
        <form [formGroup]="contactForm" fxLayout="row wrap" (ngSubmit)="onFormSubmit()">
            <div fxLayout="row" fxLayout.lt-sm="column" fxLayoutGap="16px">
                <mat-form-field fxFlexFill color="accent">
                    <input id="fName" matInput type="text" placeholder="Your first name" formControlName="firstName">
                </mat-form-field>
                <mat-form-field fxFlexFill color="accent">
                    <input id="lName" matInput type="text" placeholder="Your last name" formControlName="lastName">
                </mat-form-field>
            </div>

            <mat-form-field fxFlexFill color="accent">
                <input id="email" matInput type="text" placeholder="Your email" formControlName="email">
            </mat-form-field>
            <mat-form-field fxFlexFill color="accent">
                <textarea
                    matInput
                    [rows]="6"
                    placeholder="Your message"
                    formControlName="message"></textarea>
            </mat-form-field>

            <button fxFlexFill color="accent" mat-raised-button type="submit" [disabled]="!contactForm.valid">Let's vacation!</button>
        </form>
    </div>

</mat-card>

如果有人知道我如何让它发挥作用，那就太好了！

先感谢您！这是我的第一篇文章，因此我愿意接受一些有关如何改进提问的反馈。

Answer 1

简单的解决方案，我想我只需要睡觉就可以了。

    <div fxLayout="row" fxFlexFill fxLayout.lt-sm="column" fxLayoutGap="16px">
        <mat-form-field fxFlex color="accent">
            <input matInput type="text" placeholder="Your first name" formControlName="firstName">
        </mat-form-field>
        <mat-form-field fxFlex color="accent">
            <input matInput type="text" placeholder="Your last name" formControlName="lastName">
        </mat-form-field>
    </div>

我所要做的就是将 fxFlexFill 属性添加到该行。