CODEWITHSUNDEEP
cssangularng-class
GettingStarted
GettingStarted

Reputation: 7625

My NgClass is not being applied to the element

<mat-dialog-content class="mat-typography">
    <div *ngFor="let form of addEmpForm; let i = index" class="example-container" [ngClass]="{
        'example-container': true,
        'formValidationError': validationFormErrors[i] == true
    }">

When I add this NgClass, my form is missing and CSS doesn't look right. (see image)

If I remove ngClass, it looks fine.

I need to use this class if there is an error in the form so I can apply a border and color the border red.

without NgClass

With NgClass

SCSS file

.example-container mat-form-field + mat-form-field {
    margin-left: 8px;
}

.example-container mat-form-field {
    width: 500px;
}

.example-container form {
    margin-bottom: 20px;
}

.example-container form > * {
    margin: 12px 0;
}

.example-container .mat-radio-button {
    margin: 0 12px;
}

.example-form-fields {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

mat-label.field-label {
    color: #000000;
}

.example-form-fields-last {
    display: flex;
    justify-content: space-between;
}

.cancel-btn, button.add-more-btn, button.submit-btn {
    background-color: #1e2b54 !important;
    color: white !important;
}

.cancel-btn:hover, button.add-more-btn:hover, button.submit-btn:hover {
    background-color: yellow;
    color: red !important;
}

.formValidationError {
    border: 2px solid red;
    padding: 10px;
    border-radius: 20px;
    background-color: lightcoral;
}

TypeScript where we get set the array

this.validationFormErrors = empData.map((it: any) => it.isValidationError);

Upvotes: 0

Views: 94

Answers (3)

Adam Zabrocki
Adam Zabrocki

Reputation: 359

In submodules it is essential to import the CommonModule, to make a use of NgClass directive

Upvotes: 0

salhi
salhi

Reputation: 9

can you add to your css .formValidationError '!important;' to all the property you used? and try again

Upvotes: -1

Myles Morrone
Myles Morrone

Reputation: 223

(Can't add comments until 50 rep) You are trying to set 'example-container' twice since it is hard coded in your class as well as set to true in ngClass. Other than that it looks to be implemented correctly. If you could give a little more context with your TS and CSS files and maybe we can work through the issue.

Upvotes: 0

Related Questions