[Angular2 Form] Understand the Angular 2 States of Inputs: Pristine and Untouched

Angular 2’s ngModel exposes more than just validity, it even gives you the states of whether the input has been “touched” or changed. This lesson explains and compares those states so you can use them to make complex validity requirements.

  <form name="myForm2" #formRef2="ngForm" (ngSubmit)="onSubmit(formRef2.value)">

    <fieldset ngModelGroup="login">

      <legend>Login:</legend>

      Username: <input type="text" name="username" #usernameRef="ngModel" ngModel required>

      Password: <input type="password" name="password" #passwordRef="ngModel" ngModel required>

    </fieldset>

  </form>

  <div class="error-messages" *ngIf="!formRef2.valid">

    <span class="error-message" *ngIf="!usernameRef.untouched && usernameRef.errors?.required">Username is required</span>

    <span class="error-message" *ngIf="!passwordRef.untouched && passwordRef.errors?.required">password is required</span>

  </div>

  <pre>

    username pristine: {{usernameRef.pristine}}

    username dirty: {{usernameRef.dirty}}

    username untouched: {{usernameRef.untouched}}

    username touched: {{usernameRef.touched}}

    form value: {{formRef2.value | json}}

    form valid: {{formRef2.valid | json}}

  </pre>