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

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

你可以使用CSS技巧

.mat-form-field{
   width:350px !important;
}

Answer 3

下面将让现场50%的Viewport Width使用style="width:50vw"

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

Answer 4

强制样式应该可以解决问题

.mat-input-wrapper{
  width:400px !important;
}

或者

<mat-form-field style="width:400px !important" ...>
   ...
</mat-form-field>

如果您不想处理页面上的所有输入字段，请尝试添加一个类。