Conditional material style in form field

Question

In Angular, how can I render a material style conditionally?

For example, I want to only apply the style

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

to my Password form field text and only when both input boxes have input.

See below:

As you can see, the padding-right is being applied to the Email form field text as well. However, I only want this padding-right to be applied to the bottom form field text, when both input boxes have input, so the text does not go over the submit button.

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>

How can I achieve this?

Thanks in advance.

Did you try to mark with a custom class or id the mat-form-field of password and then add more concrete .css style rule? Hence, padding will be applied only to the password element. — hastrb
I did, but it did not work. The padding-right was applied to the whole form field and I just want the text inside it to have padding-right so as not to overlap with the button. — Manuel Brás
Have you played with the matSuffix directive on your div yet? Might want to give that a shot as you shouldn't need padding if that fits your needs. Check material.angular.io/components/form-field/overview for usage. — robbieAreBest
Wow. Such an easy fix. You sir are a legend! Please add an answer so I can mark it as correct! — Manuel Brás

Srikar Phani Kumar Marti Srikar Phani Kumar Marti · Accepted Answer · 2021-05-13T16:23:41

Please check this stackblitz: https://stackblitz.com/edit/angular-9-material-starter-hiywat?file=src%2Fapp%2Fapp.component.html

What I did: You can add classes to the <mat-form-field> tag which will allow you to style particular form fields and not all in general.

In your case too, add a class to the mat-form-field that you want to change and add the styles in that class and it should work.

Conditional material style in form field

1 Answers