表单字段中的条件材质样式答案

【问题标题】：Conditional material style in form field表单字段中的条件材质样式
【发布时间】：2021-05-13 15:51:55
【问题描述】：

在 Angular 中，如何有条件地渲染材质样式？

例如，我只想应用样式

.mat-form-field-appearance-outline .mat-form-field-infix{
    padding-right: 2.3em;
}

到我的密码表单字段text，并且仅当两个输入框都有输入时。

见下文：

如您所见，padding-right 也被应用于电子邮件表单字段 text。但是，当两个输入框都有输入时，我只希望将此填充权限应用于底部表单字段 text，因此文本不会越过提交按钮。

我的 .html：

    <mat-form-field appearance="outline" hideRequiredMarker>
        <mat-label>Email</mat-label>
        <input 
            matInput 
            [(ngModel)]="emailLoginInput"
            style="caret-color: white" 
        />
    </mat-form-field>
    <mat-form-field appearance="outline" hideRequiredMarker>
        <mat-label>Password</mat-label>
        <input
            matInput
            [(ngModel)]="passwordLoginInput"
            type="password"
            style="caret-color: white"
        />
        <div
            [ngStyle]="{'visibility': passwordLoginInput.length && emailLoginInput.length ? 'visible' : 'hidden'}"
            class="continue-button"
            (click)="loginAccount()"
        >
            <img
                src="../../../assets/login/login-arrow.svg"
                alt="Continue"
            />
        </div>
    </mat-form-field>

我怎样才能做到这一点？

提前致谢。

【问题讨论】：

您是否尝试使用自定义类或 ID 标记 password 的 mat-form-field，然后添加更具体的 .css 样式规则？因此，填充将仅应用于密码元素。
我做了，但没有用。 padding-right 应用于整个表单字段，我只希望其中的文本具有 padding-right 以免与按钮重叠。
你在你的 div 上玩过 matSuffix 指令了吗？可能想试一试，因为如果符合您的需要，您不需要填充。检查material.angular.io/components/form-field/overview 的使用情况。
哇。如此简单的修复。先生，您是传奇！请添加答案，以便我将其标记为正确！

标签： css angular angular-material

【解决方案1】：

请检查此堆栈闪电战： https://stackblitz.com/edit/angular-9-material-starter-hiywat?file=src%2Fapp%2Fapp.component.html

我所做的：您可以将类添加到 <mat-form-field> 标记，这将允许您设置特定表单字段的样式，而不是一般的样式。

在您的情况下，将一个类添加到您要更改的 mat-form-field 并在该类中添加样式，它应该可以工作。

【讨论】：

不工作：/我只希望密码输入框中的文本具有填充权，以免与按钮重叠。