Ionic 3 输入下划线不会因验证器而改变颜色，直到您至少关注一次输入

Question

我的问题是，在您至少关注一次输入之前，下划线不会改变颜色。我在enviarElastic()放了一个环来标记为触摸，但即便如此，它也只有在你聚焦时才会改变颜色。如果按下按钮，当输入为空时，它应该更改下划线的颜色

constructor(public navCtrl: NavController, public navParams: NavParams, public actionSheetCtrl: ActionSheetController, public servicioCamara:ServicioCamaraProvider,
          public http:ServicioHttpProvider, public modalCtrl: ModalController, public  toastCtrl:ToastController, private formBuilder: FormBuilder) {
this.form = this.formBuilder.group({
  idContenedor: ['',[Validators.required,Validators.minLength(3)]],
  tipo_contenedor1: [''],
  tipo_incidencia1: ['', [Validators.required, Validators.minLength(2)]],
  descripcion_incidencia1: ['', Validators.compose([Validators.required, 
  Validators.minLength(1)])]
});}
 public enviarElastic(){
for (var i in this.form.controls) {
  this.form.controls[i].markAsTouched();
  this.form.controls[i].updateValueAndValidity({ onlySelf: false, emitEvent: true});
}
var formu=this.formulario;
if(this.formulario.id_contendor=="" || this.formulario.tipo_incidencia=="" || this.formulario.tipo_contenedor=="" || this.formulario.descripcion_incidencia==""  ){
  this.presentToast("Falta de rellenar Algun campo");
}else{
  var imagenes=this.cargarEntidadesImagenes();
  let 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);
}

这是 html

  <form class="contact_form" [formGroup]="form" (ngSubmit)="enviarElastic()" action="#" method="post" novalidate>
<ion-list>
    <ion-item>
      <ion-label  color="dark" stacked>Identificador del contenedor:</ion-label>
      <ion-input formControlName="idContenedor" type="text" placeholder="IdContenedor" [(ngModel)]="formulario.id_contendor" ></ion-input>
    </ion-item>
  <ion-item>
    <ion-label color="dark" stacked>Tipo de contenedor</ion-label>
    <ion-select formControlName="tipo_contenedor1" [(ngModel)]="formulario.tipo_contenedor">
      <ion-option value="Papel y Carton" >Papel y Carton</ion-option>
      <ion-option value="Plastico">Plastico</ion-option>
    </ion-select>
  </ion-item>
    <ion-item>
      <ion-label color="dark" stacked>Tipo de Incidencia:</ion-label>
      <ion-input formControlName="tipo_incidencia1" type="text" placeholder="Tipo de incidencia" [(ngModel)]="formulario.tipo_incidencia" ></ion-input>
    </ion-item>
  <ion-item>
    <ion-icon name="images" item-start></ion-icon>
    <ion-label >Imagenes :{{servicioCamara.imagenes_base64.length}} </ion-label>
    <div class="buttons" item-end>
      <button value="Enviar" (click)="mostrarSeleccionadorImagenes()"  ion-button>Seleccionar</button>
    </div>
  </ion-item>
  <ion-item>
      <ion-label color="dark" stacked >Descripcion de la incidencia</ion-label>
      <ion-textarea  formControlName="descripcion_incidencia1" placeholder="Escribe aqui la descripcion de la incidencia" [ngModel]="formulario.descripcion_incidencia" ></ion-textarea>
  </ion-item>
</ion-list>
<button value="Enviar"    type="submit" class="button button-block button-positive" ion-button>Enviar</button>

Answer 1

这是因为Ionic中的一个错误。它使离子项元素保持不变。下面描述了这个问题：https://forum.ionicframework.com/t/ionic-form-validate-from-code-remove-ng-untouched/98010

与上述链接中描述的解决方法基本相同：

public onSubmit() {
  if (!this.form.valid) {
     this.markAllAsTouched(this.form);
     return;
  }
}
private markAllAsTouched(formGroup: FormGroup) {
  Object.keys(formGroup.controls).forEach((controlName) => {
    const control = formGroup.get(controlName);
    const element = document.querySelector('[formControlName="' + controlName + '"]');
      if (control instanceof FormControl) {
        control.markAsTouched({ onlySelf: true });
        if (element) {
          const ionItem = element.closest("ion-item");  // Note that .closest is not supported by IE11. See https://stackoverflow.com/questions/18663941/finding-closest-element-without-jquery for alternatives
          this.setControlCss(ionItem, formGroup.controls[controlName]);
        }
      } else if (control instanceof FormGroup) {
        this.markAllAsTouched(control);
      }
  });
}
private setControlCss(element: any, control: AbstractControl) {
  this.renderer.setElementClass(element, "ng-untouched", control.untouched);
  this.renderer.setElementClass(element, "ng-touched", control.touched);
  this.renderer.setElementClass(element, "ng-pristine", control.pristine);
  this.renderer.setElementClass(element, "ng-dirty", control.dirty);
  this.renderer.setElementClass(element, "ng-valid", control.valid);
  this.renderer.setElementClass(element, "ng-invalid", !control.valid);
}