Angular 2+ multi-part form validation, how to check validity of single input

Question

I have a form, and the form has multiple inputs that are all bound to different variables. Before submitting the form, I need to do validity checks, pristine checks, etc. For example, I want my submit button to be disabled if every part of the form is pristine, or if something is invalid.

Using Angular 5, I am trying to get access to the .pristine , .valid , and .invalid flags for each input field, but the values are either undefined or "cannot get .pristine of undefined".

I am able to get these flags on the entire form itself, but this doesn't help, because I want to know how to get it for each individual input.

Here is my current code (I've removed a number of my inputs to simplify the example).

<form #editDetailsForm="ngForm" name="editDetailsForm" >
    <label for="name"> Name </label>
    <input type="text" id="name" name="name" maxlength="40" [(ngModel)]="myName" required />

    <label for="description"> Description </label>
    <textarea id="description" name="description" maxlength="250" [(ngModel)]="myDescription" required ></textarea>

    <button id="submit" type="button"
        [disabled]="saveButtonDisabled(editDetailsForm.invalid, editDetailsForm.name.invalid, editDetailsForm.description.invalid)"
        (click)="updateDetails()" >
        Save
    </button>
</form>

If you see, I bind disabled attribute on the Save button to saveButtonDisabled() function, where I want to pass in information about each input's validity. The first argument, editDetailsForm.invalid returns a true or false, but the other values return undefined.

How do I check validity of these individual inputs?

EDIT: I realize I can derive all of this info inside my component because all of the input values are bound. However, it'd be easier just to check a flag or two.

Answer 1

I'm not sure I totally understand what you want to do, but this is how you get access to the form controls .pristine, .invlaid

 <input type="text" id="name" name="name" #name="ngModel" maxlength="40" [(ngModel)]="myName" required />

The #name="ngModel" sets a template reference to the FormControl angular creates

Then you should be able to do something like this:

<input type="text" id="name" name="name" #name="ngModel" maxlength="40" [(ngModel)]="myName" required />
<div *ngIf="name.pristine">
  Name is Pristine
</div>

Just to clarify, the individual form fields bubble up to the form itself. So if any field has been touched, then the whole form will be pristine == false.

Answer 2

You can access the input controls using the .controls property, like:

    <button id="submit" type="button"
    [disabled]="editDetailsForm.controls.name?.invalid || editDetailsForm.controls.description?.invalid">

Answer 3

Created a stackblitz. https://stackblitz.com/edit/angular-5ir4k7

Added template reference variable for ngModel and validate using isValid.