Ionic form validate from code, remove ng-untouched

@cyptus wrote:

i've the following form:

<form [formGroup]="personForm">
  <ion-list>
    <ion-item>
      <ion-label color="primary">Name</ion-label>
      <ion-input type="text" placeholder="Name" [(ngModel)]="username" formControlName="username"></ion-input>
    </ion-item>
  </ion-list>
</form>

in my constructor i register it:

    this.personForm = formBuilder.group({
      username:              ['', Validators.required]
    });

on the "next" button i want to verify the form. this works fine, and via "this.personForm.valid" i can verify the form. if the user touchs into the username field, and presses the next button, the field is also marked as red (from $text-input-ios-show-invalid-highlight) and invalid -> perfect.

But if the user does not touch the field and presses the next button, the form is invalid and the input is NOT marked red. When i manually remove the "ng-untouched" css-class from this input element, it is marked as red.

I tried to set the Control as "touched" in various forms:

    for (var i in this.personForm.controls) {
      this.personForm.controls[i].markAsTouched();
      this.personForm.controls[i].updateValueAndValidity({ onlySelf: false, emitEvent: true});
    }

    this.personForm.markAsTouched();
    this.personForm.updateValueAndValidity({ onlySelf: false, emitEvent: true});

with and without parameters for updateValueAndValidity etc.
The control has the right status after this (touched: true), but ionic will not automatticly remove the "ng-untouched" class from the control, even if the control is successfully marked as touched.

How can this be done?

Posts: 1

Participants: 1

Read full topic