Angular Material 2 表单字段外观问题

Question

我正在尝试将填充外观添加到我的应用程序中的表单输入中。我已导入 MatFormFieldModule 和 MatInputModule 并将外观 =“填充”添加到我的 mat-form-field 元素，但我没有看到任何填充。我在这里错过了一步吗？

Current Application Login

<div class="container">
    <img src="/assets/img/bt_logo_blue.svg" class="bt-logo">
    <form [formGroup]="loginForm" (ngSubmit)="login()" class="form-signin">
        <h2 class="form-signin-heading">Log in</h2>
        <mat-form-field appearance="fill">
            <input matInput type="text" class="input-block-level" id="input-email" formControlName="email" placeholder="Email Address">
            <i class="fal fa-envelope" matSuffix></i>
        </mat-form-field>
        <mat-form-field appearance="fill">
            <input matInput type="password" class="input-block-level" id="input-password" formControlName="password" placeholder="Password">
        </mat-form-field>
        <button mat-raised-button class="btn btn-large btn-primary" type="submit" color="primary">Log in</button><br/>
        <h6 id="forgot-password-link" routerLink="/forgotpassword">Forgot Password?</h6>
        <hr>
        <h6 id="no-account">Don't have an account? <a routerLink="/signup">Sign Up</a></h6>
    </form>
</div>

Answer 1

这很可能是由错误版本的 Material 引起的。你在哪个版本？就在 30 分钟前，外观属性在 git 中进行了编辑。所以那里的情况变化很快。

这是使用 6.0.1 的工作版本：

https://stackblitz.com/angular/ndbydqgqeqx

还有一个在 5.2.4 上不工作的：

https://stackblitz.com/edit/angular-ydqbci

您可以查看材料更改日志以查看最近进行的所有表单字段更改：

https://github.com/angular/material2/blob/master/CHANGELOG.md