时间戳

首页 > 解决方案 > Ionic 4 / Angular - 验证突出显示超出本机输入字段

angular - Ionic 4 / Angular - 验证突出显示超出本机输入字段

问题描述

将用户输入添加到设置宽度的输入表单时，下划线会超出输入范围。

下划线验证超出输入

给定以下代码：

    <ion-list lines="none">
      <ion-item>
         <ion-label color="medium" position="floating">Username</ion-label>
         <ion-input type="text" formControlName="username" autocomplete="username"></ion-input>
              </ion-item>
            <ion-text
                color="danger"
                [hidden]="loginForm.controls.username.valid || loginForm.controls.username.untouched"
              >
                <span padding>Valid email is required</span>
            </ion-text>
            <ion-item>
              <ion-label color="medium" position="floating">Password</ion-label>
              <ion-input type="password" formControlName="password" autocomplete="current-password"></ion-input>
            </ion-item>
            <ion-text
                color="danger"
                [hidden]="loginForm.controls.password.valid || loginForm.controls.password.untouched"
              >
                <span padding translate>Password is required</span>
            </ion-text>
            <a href="/login/forgot" class="forgot-password ion-float-right">
                [Forgot Your Password?]
            </a>
         </ion-list>

此外，当我点击一个字段时，INPUT 会覆盖整个 ion-item 字段，而不是 ion-input 字段，如下所示：

在此处输入图像描述

我尝试了对 css 的各种更改，但没有取得很大成功。通过检查器，我可以通过将 --inset-padding-end 变量更改为 0 来解决这个问题，但我还没有找到如何在全局范围内更改/设置它？

是否有任何人知道的快速解决方案？当 ion-list 设置为“inset”时，这个错误特别难看，如下图：

在此处输入图像描述

标签： angularvalidationionic-frameworkinputfocus

解决方案

它与输入表单的固定宽度无关。请将 css 属性设置ion-item --padding-start为0

    ion-item {
     --padding-start: 0;
    }

ion-item还有其他与填充相关的自定义 css 属性，您可以使用它们来获得任何所需的效果。

推荐阅读