Angular mat-form-field 如何设置宽度：100%

Question

作为学习 Angular 和 Nodejs 的一部分，我创建了一个注册表单。我的表格看起来很宽而且没问题，但是此表格上的字段看起来很窄或很薄。我尝试将 Width:100% 直接设置为容器标签，但没有成功。

如何使用 css 标签为所有这些字段设置 width:100%？

我的表格使用角度：

 <mat-card>
  <mat-card-header>
    <mat-card-title>
      <h4>Register New User</h4>
    </mat-card-title>
  </mat-card-header>
  <mat-card-content class="register-container">
    <form>
      <mat-form-field>
        <input matInput placeholder="E-mail" ng-model="data.email" type="email">
      </mat-form-field>
      <br />
      <mat-form-field>
        <input matInput placeholder="Password" ng-model="data.pwd" type="password">
      </mat-form-field>
      <br>
      <mat-form-field>
        <input matInput placeholder="Name" ng-model="data.name" type="text">
      </mat-form-field>
      <br>
      <mat-form-field>
        <textarea matInput ng-model="data.description" placeholder="Leave a comment"></textarea>
      </mat-form-field>
    </form>
  </mat-card-content>
</mat-card>

原文由 user428745 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这很好用。

 mat-form-field {
  width: 100%;
}

现场演示

原文由 Tomasz Kula 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

你也可以这样做。

   <mat-form-field [style.width.%]="100"></mat-form-field>

这也有助于根据组件的属性有条件地设置样式值。

  <mat-form-field [style.width.%]="fullWidth? '100' : '50'"></mat-form-field>

原文由 RRR 发布，翻译遵循 CC BY-SA 4.0 许可协议