我正在尝试将文本字段和复选框并排实现,就像这样。
但是问题在于
![enter image description here](https://istack.dev59.com/7QyLy.webp)
<mat-form-field>
和<mat-checkbox>
没有垂直对齐。如何继续使它们垂直对齐? 下面是代码:<mat-card>
<mat-card-title>
Family Information
</mat-card-title>
<form [formGroup]="familyInfo">
<div fxLayout="row" fxLayoutAlign="flex-start" fxLayoutGap="40px">
<mat-form-field fxFlex="10%">
<mat-label>Contact Name</mat-label>
<input matInput>
</mat-form-field>
<mat-form-field fxFlex="10%">
<mat-label>Relation Type </mat-label>
<mat-select>
<mat-option *ngFor="let relationType of relationTypes" [value]="relationType" color="accent">
{{relationType}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="10%">
<mat-label>Gender </mat-label>
<mat-select>
<mat-option *ngFor="let gender of genders" [value]="gender" color="accent">
{{gender}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="10%">
<mat-label>Date Of Birth</mat-label>
<input matInput [matDatepicker]="dateOfBirth" formControlName="dateOfBirth">
<mat-datepicker-toggle matSuffix [for]="dateOfBirth"></mat-datepicker-toggle>
<mat-datepicker #dateOfBirth></mat-datepicker>
</mat-form-field>
<mat-checkbox formControlName="isDependent">Is Dependent</mat-checkbox>
<div fxFlex="100%"></div>
<mat-card-actions>
<button mat-raised-button color="primary" type="submit" class="align-right-button">
Save
</button>
</mat-card-actions>
</div>
我尝试使用<mat-form-field>
,但根据 Angular Material 文档,<mat-checkbox>
无法成为 <mat-form-field>
的一部分。