Ionic 3输入框下划线未随校验器实时变色问题求助

看起来你遇到的核心问题是：点击提交按钮后，未被聚焦过的输入框没有根据校验规则显示错误样式（下划线变色），即使你已经调用了markAsTouched()和updateValueAndValidity()。我来帮你一步步解决这个问题：

一、修正代码中的拼写错误与逻辑问题 #

首先看你的enviarElastic()方法，里面存在几个容易导致问题的点：

1. 手动判断表单字段是否为空时，变量名拼写错误（比如id_contendor对应表单控件的idContenedor，大小写和拼写不统一），而且手动判断完全没必要——表单校验器已经帮你完成了这项工作。
2. 遍历表单控件的方式可以更可靠，避免遍历到原型链上的无关属性。

修改后的enviarElastic()方法：

public enviarElastic() {
  // 遍历所有表单控件，标记为已触碰
  Object.values(this.form.controls).forEach(control => {
    control.markAsTouched({ onlySelf: true });
    control.updateValueAndValidity({ onlySelf: false, emitEvent: true });
  });

  // 直接使用表单的valid属性判断是否通过校验
  if (!this.form.valid) {
    this.presentToast("Falta de rellenar Algun campo");
    return;
  }

  // 表单校验通过，继续后续逻辑
  const formu = this.formulario;
  const imagenes = this.cargarEntidadesImagenes();
  const body = {
    "type": "incidencia",
    "id_contendor": formu.id_contendor.toString(),
    "tipo_contendor": formu.tipo_contenedor.toString(),
    "tipo_incidencia": formu.tipo_incidencia.toString(),
    "descripcion_incidencia": formu.descripcion_incidencia.toString(),
    "imagenes": imagenes
  };
  this.http.ngPost(body);
}

二、确保Ionic错误样式正确触发 #

Ionic的默认样式中，输入框的错误状态（下划线变色）需要同时满足ng-invalid和ng-touched两个条件。你已经标记了控件为touched，但可以自定义CSS来强化错误样式的触发：

在页面的CSS文件中添加以下样式，确保只要控件无效且已触碰，就显示红色下划线：

/* ion-input错误样式 */
ion-item.item-has-input.ng-invalid.ng-touched ion-input {
  border-bottom: 2px solid var(--ion-color-danger);
}

/* ion-textarea错误样式 */
ion-item.item-has-textarea.ng-invalid.ng-touched ion-textarea {
  border-bottom: 2px solid var(--ion-color-danger);
}

/* ion-select错误样式 */
ion-item.item-has-select.ng-invalid.ng-touched ion-select {
  border-bottom: 2px solid var(--ion-color-danger);
}

三、统一模板中的绑定名称 #

你的模板中同时使用了formControlName和[(ngModel)]，但两者的绑定名称不一致（比如formControlName="idContenedor"对应[(ngModel)]="formulario.id_contendor"），可能导致表单值同步混乱。建议统一命名，示例修改如下：

<ion-item>
  <ion-label color="dark" stacked>Identificador del contenedor:</ion-label>
  <ion-input 
    formControlName="idContenedor" 
    type="text" 
    placeholder="IdContenedor" 
    [(ngModel)]="formulario.idContenedor" 
  ></ion-input>
</ion-item>

为什么之前的代码不生效？ #

你原来用for...in遍历控件的方式可能没覆盖所有有效控件，加上手动判断空值的逻辑干扰了表单校验状态的触发，导致Ionic的错误样式没有被正确应用。修正后通过Object.values遍历所有控件，确保每个控件都被标记为touched，同时依赖表单原生的valid属性判断校验结果，就能正确触发错误样式了。

内容的提问来源于stack exchange，提问作者Saul.C