Ionic 3 добавляет класс динамически, если ввод недействителен

Привет, я использую Ionic 3, и я использую formBuilder из Угловой для проверки моего входные данные формы и отображения некоторого сообщения проверки в пользовательском интерфейсе компонента, когда что-то идет не так с Вход.

Теперь все работает нормально кроме одного. Я хочу добавить класс динамически к моему вводу, когда input field не является действительный.

Картинка ниже.

Вот как это выглядит у меня в 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>

а в моем scss у меня это ниже

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

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

Что-то не так с моим динамический класс?

Я предполагаю, что dynamic class неправильный, и мой конструктор форм работает нормально, потому что появляется сообщения проверки.

Вот и все мои код scss

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;
}

}

Цените, если кто-то может помочь. Заранее спасибо.