Angular Material 2 Form Field外观问题

Question

我正在尝试将填充外观添加到我的应用程序中的表单输入。我导入了 MatFormFieldModule 和 MatInputModule 并将 appearance="fill"添加到我的 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 中编辑了 appearance 属性。所以那边的情况变化很快。

这是一个使用 6.0.1 的工作版本:

https://stackblitz.com/angular/ndbydqgqeqx

还有一个在 5.2.4 上不起作用的:

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

您可以查看 Material 更新日志以查看最近所做的所有表单字段更改:

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