<mat-form-field> 标签限制了表单的宽度，与容器的宽度不匹配

Question

我正在使用 Angular 编辑表单，但效果不佳。我在使用Chrome开发工具调试的时候发现mat-form-field限制了输入区域的宽度，而我没有放任何CSS代码来指定宽度。

form和p标签的宽度：460，mat-form-field的宽度：180。除了容器部分，我没有给代码添加任何样式。

<div class="container"
fxLayout="row"
fxLayout.sm="column"
fxLayout.xs="column"
fxLayoutAlign.gt-md="space-around center"
fxLayoutGap="20px" 
fxLayoutGap.xs="0">

<div fxFlex *ngIf="dish">
...
</div>

<div fxFlex *ngIf="dish" class="full-width">
    <h3>
      <b>Comments</b>
    </h3>
    <mat-list *ngIf="dish.comments">
        <mat-list-item *ngFor="let comment of dish.comments">
          <p matline>
          <span>{{comment.comment}}<br></span>
          <span>{{comment.rating}} Stars<br></span>
          <span>-- {{comment.author}} {{comment.date | date}}</span>
          </p>
      </mat-list-item>
    </mat-list>

    <form novalidate #fform="ngForm" [formGroup]="commentForm" (ngSubmit)="onSubmit()">
    <p>
      <mat-form-field>
        <input matInput formControlName="name" placeholder="name" type="text" required>
        <mat-error *ngIf="formErrors.name">{{formErrors.name}}</mat-error>
      </mat-form-field>
    </p>
    <p>
      <mat-slider thumbLabel tickInterval="1" min="0" max="5" value="5"></mat-slider>
    </p>
    <p>
      <mat-form-field>
        <textarea matInput formControlName="comment" placeholder="comment" rows=8 required></textarea>
        <mat-error *ngIf="formErrors.comment">{{formErrors.comment}}</mat-error>
      </mat-form-field>
    </p>
      <button type="submit" mat-button class="background-primary text-floral-white" [disabled]="!commentForm.valid">Submit</button>
  </form>
</div>

<div [hidden]="dish">
  <mat-spinner></mat-spinner><h4>Loading . . . Please Wait</h4>
</div>

我想将 mat-form-field 宽度与表单宽度相匹配，从 180 到 460。我该怎么做？

Answer 1

将width: 100% 应用于 mat-form-field 元素；这将导致它匹配其父级的宽度。您可能需要稍微调整一下包含元素的样式，以获得您想要的确切外观。