Clash Royale CLAN TAG#URR8PPP

Ionic 3 add class dynamically if the input is not valid

Hi I am using Ionic 3 and I am using formBuilder of Angular to validate my form inputs and display some validation messages to the UI of the component when something goes wrong with the input.

Now everything works fine except for one. I want to add class dynamically to my input when the input field is not valid.

input field

Picture below.

Here is what it looks like in my html

<ion-input class="input-cover" id="firstName" formControlName="firstName" type="text" placeholder="First Name *"
[class.invalid]="form.controls['firstName'].errors && (form.controls['firstName'].dirty || form.controls['firstName'].touched)"></ion-input>


and in my scss I have this below

.invalid
border: 1px solid #ea6153;
border-radius: 5px;


.text-input-ios, .text-input-md
border-radius: 5px;
border: 1px solid #efefef;



Is there something wrong with my dynamic class?

I assume that the dynamic class is wrong and my form builder is working fine because the validation messages is popping up.

dynamic class

Here is all of my scss code

page-register
// ion-input
// border: 5px !important;
//

.upload-cover-button
position: relative;
button
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)



button
border-radius: 4px !important;


.text-input-ios, .text-input-md
border-radius: 5px;
border: 1px solid #efefef;


.text-input
margin: 0;
width: calc(100% - 8px);
padding: 13px 8px;


hr
height: 1px !important;


.input-cover
position: static;


.col-static
position : initial !important;


ion-select
padding: 1px;
border-radius: 5px;
border: 1px solid #efefef;
width: calc(100% - 8px);
max-width: 100%;


img
border-radius: 50%;
height: 80px;


.center-vertical-horizontal
display: flex;
align-items: center;
justify-content: center;


.button-spinner
display: flex;
margin-left: 5px;


.register-spinner
*
stroke: white !important;



.error-message
color: #ea6153;


.invalid
border: 1px solid #ea6153;
border-radius: 5px;



Appreciate if someone could help.
Thanks in advance.

[ngClass]="form.controls['firstName'].errors && (form.controls['firstName'].dirty || form.controls['firstName'].touched) ? 'invalid' : ''"

[ngClass]=" invalid: condition "

1 Answer
1

This should solve your problem

<ion-input class="input-cover" id="firstName" formControlName="firstName" type="text" placeholder="First Name *"
[ngClass]=" form.controls['firstName'].touched)"></ion-input>


Add this to your scss

.invalid input
border: 1px solid #ea6153;
border-radius: 5px;



console.log()

page-register .text-input margin: 0; width: calc(100% - 8px); padding: 13px 8px; page-register .text-input-ios, page-register .text-input-md border-radius: 5px; border: 1px solid #ea6153; .text-input-ios margin: 11px 8px 11px 0; padding: 0; width: calc(100% - 8px);

.text-input-ios, .text-input-md border-radius: 5px; border: 1px solid #efefef;

ion-input border: 5px !important;

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.