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

Posted 2023-02-22

【中文标题】Angular mat-form-field 如何设置宽度：100%

【英文标题】：Angular mat-form-field how to set width:100%

【发布时间】：2018-09-27 12:46:53

【问题描述】：

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

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

我使用 Angular 的表单：

<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>

【参考方案1】：

这很好用。

mat-form-field 
  width: 100%;

Live demo

【讨论】：

我猜这会影响所有对话框中的所有表单字段 - 请耐心等待一个菜鸟问题 - 仅在一个对话框中为这些具体化对话框表单字段设置不同宽度的正确方法是什么？

在组件文件中设置即可。

【参考方案2】：

你也可以这样做。

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

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

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

【参考方案3】：

虽然mat-form-field 选择器有效且运行良好，但 SonarQube 和其他代码质量工具会在自定义选择器上发出警告。

我的建议是通过类名而不是组件标签来挂钩表单字段

.mat-form-field width: 100%;

【参考方案4】：

如果您使用 flexLayout，您可以使用 fxFlex 设置所需的大小，如下面的代码：

 <mat-form-field appearance="outline" fxFlex="40"></mat-form-field>

【参考方案5】：

我曾经遇到过同样的问题，这是我解决它的方法。

为要编辑的字段的容器使用标识符。例如，我将使用 sopi 这个词。

    <mat-card id="sopi">
      <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 />
        </form>
      </mat-card-content>
    </mat-card>

然后在 css 规则中使用更具体的标识符，并将 mat-form-field 宽度属性更改为 100%。

    #sopi mat-form-field 
      width: 100%;
    

这样规则将仅适用于标识为 sopi 的容器，并且输入将设置为 100%。

【参考方案6】：

这对我有用

mat-form-field
  display: block;