Question

嗨，我正在使用Ionic 3，并且正在使用{strong> Angular 的INPC来验证我的表单输入并显示一些验证消息 输入出现问题时，进入组件的用户界面。

现在，除了一个以外，一切都正常。当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;
}

}

感谢有人可以帮助您。预先感谢。

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

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

1 个答案: