如果输入无效，Ionic 3 动态添加类

Question

您好，我正在使用 Ionic 3，我正在使用 Angular 的 formBuilder 来验证我的 表单输入 并显示一些 验证消息 输入出现问题时组件的 UI。

现在一切正常，除了一个。当input field 不是有效时，我想将class dynamic添加到我的输入中。

如下图。

这是我的 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;
}

}

如果有人可以提供帮助，我们将不胜感激。 提前致谢。

Answer 1

这应该可以解决您的问题

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

将此添加到您的 scss

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