[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>