How to get a single form field validity in Angular 2?

2
votes

NOTE: this is not the same question as my other question at https://stackguides.com/questions/38356330/how-to-use-pattern-validation-in-angular-2-based-on-ngmodel-template-model-driv

This is my code (Angular 2 rc2 app with deprecated forms):

<form #myForm="ngForm">
    <input id="inputControlX" ngControl="inputControlX" pattern="abcd">
    {{inputControlX.valid}}
</form>

inputControlX is validated correctly (ng-invalid class is added to the input). However when I add 

 {{inputControlX.valid}}

or

{{myForm.inputControlX.valid}}

or 

{{ngForm.inputControlX.valid}}

I keep getting an error: can't read property valid of undefined. On the other hand adding (as in this answered question) #inputControlX="ngForm", makes it work (even without ngControl)

Why is this necessary?

1
angularangular2-forms

1 Answers

2
votes

You have to use Elvis operator / ngIf directive here, Because when angular tries to evaluate binding of the page, myForm object haven't initialized yet. So while evaluating myForm.inputControlX.valid expression, myForm object isn't defined that time, so it throws an error.

{{myForm?.inputControlX?.valid}}
//OR    
<span *ngIf="myForm"> {{myForm.inputControlX.valid}}</span>