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

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

例如，我只想应用样式

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

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

见下文：

如您所见，右边的填充也应用于电子邮件表单字段文本。但是，我只希望在两个输入框都有输入时，将此填充正确应用于底部表单字段文本，以便文本不会越过提交按钮

My.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>

电子邮件
密码

我怎样才能做到这一点

---

提前感谢。

请查看此stackblitz：

我所做的：您可以将类添加到

标记中，这将允许您设置特定表单字段的样式，而不是所有表单字段的样式

---

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

您是否尝试使用自定义类或id标记

密码的
mat form字段
，然后添加更具体的.css样式规则？因此，填充将只应用于password元素。填充权限应用于整个表单字段，我只希望其中的文本具有填充权限，以避免与按钮重叠。您在div上使用matSuffix指令了吗？如果你需要的话，你不需要填充物，所以你可能想试试。检查使用情况。哇。这么简单的解决办法。先生，你是个传奇人物！请添加答案，以便我将其标记为正确！不工作：/I我只希望密码输入框中的文本有正确的填充，以免与按钮重叠。