javascript - 在输入 mat-form-fields 上设置 Angular Material 的宽度

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>