设置角度材料的输入mat-form-field的宽度

Question

我对Angular非常陌生，我正在尝试创建一个具有比默认输入字段更长的输入字段的表单。这是我当前的代码：

person.component.html

<form class="new-person-form">
    <mat-card>
        <mat-form-field>
            <input matInput placeholder="Name">
        </mat-form-field>
        <mat-form-field>
            <input matInput placeholder="Birthday">
        </mat-form-field>
        <mat-checkbox>Active</mat-checkbox>
    </mat-card>
</form>

person.component.css

.mat-form-field {
    padding: 10px;
}

.mat-checkbox {
    padding: 10px;
}

person.component.html

<form class="new-person-form">
    <mat-card fxLayout="row">
        <mat-form-field>
            <input matInput placeholder="Name" fxFlex="50">
        </mat-form-field>
        <mat-form-field>
            <input matInput placeholder="Birthday" fxFlex="25">
        </mat-form-field>
        <mat-checkbox fxFlex="25">Active</mat-checkbox>
    </mat-card>
</form>

person.component.css

.mat-form-field {
    padding: 10px;
}

.mat-checkbox {
    padding: 10px;
}

这就是结果：

|                                                                          |
|   Name___________  Birthday_______  [] Active                            |
|                                                                          |

我正在尝试将Name加长到页面的50%左右，因此如下所示：

|                                                                          |
|   Name___________________________  Birthday_______  [] Active            |
|                                                                          |

我对CSS不是很在行，所以我认为FlexLayout可能是我需要的，但到目前为止我还不能让它正常工作。

Answer 1

这将更改matform字段的宽度

<mat-form-field [style.width.px]=327>
  <input matInput placeholder="Template Name" value="{{templateName}}">
</mat-form-field>

Answer 2

下面将使用style="width:50vw"将Viewport Width的字段设置为50%

<mat-form-field style="width:50vw" ...>
   ...
</mat-form-field>

Answer 3

使用fxLayout可以创建一个flexbox。为了让flexbox中的每个元素都使用整行，你应该使用fxFlexFill。要使元素消耗剩余空间，可以使用fxFlex。

您还可以在样式中使用fxLayoutGap而不是填充。此外，如果您希望元素在没有更多空间时转到下一行，您可以使用fxLayout=“行换行”。

以下是您正在寻找的一些示例：

    <form class="new-person-form">
        <h3>full Rows:</h3>
        <mat-card fxLayout="row wrap">
            <mat-form-field fxFlexFill>
                <input matInput placeholder="Name" fxFlex="50">
        </mat-form-field>
        <mat-form-field fxFlexFill>
            <input matInput placeholder="Birthday" fxFlex="25">
        </mat-form-field>
        <mat-checkbox fxFlex="25">Active</mat-checkbox>
      </mat-card>
      <h3>50-25-25:(checkbox consumes same space as Birthday)</h3>
      <mat-card fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="15px">
          <mat-form-field fxFlex="50">
              <input matInput placeholder="Name">
          </mat-form-field>
          <mat-form-field fxFlex="25">
              <input matInput placeholder="Birthday">
          </mat-form-field>
          <mat-checkbox fxFlex="25">Active</mat-checkbox>
      </mat-card>
      <h3>50-remaining-required:(Birthday consumes remaining space)</h3>
      <mat-card fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="15px">
          <mat-form-field fxFlex="50">
              <input matInput placeholder="Name">
          </mat-form-field>
          <mat-form-field fxFlex>
              <input matInput placeholder="Birthday">
          </mat-form-field>
          <mat-checkbox>Active</mat-checkbox>
      </mat-card>
    </form>

我还创建了一个working example in stack blitz。