Once you have created an Angular app inside Visual Studio 2019 using the Asp.Net 3 Core template, you are ready to build some wonderful tools. Here are a few tips on how to quickly see behind the curtain in how Angular modifies and handles Forms and Form Fields.
Let’s start simple: Imagine you have a simple form where an input field is two-way bound to a field on your component:
<form> <div class="form-group"> <input [(ngModel)]="name" class="form-control" required /> </div>
Let’s add an Angular local variable to the input called “#classTest”
<input [(ngModel)]="name" class="form-control" required #classTest />
We can now reference that field on the page and display the values by piping the classTest to a json pipe:
You’ll see this:
These are internal properties Angular uses to manipulate and track the form field. Sweet!
Now, let’s see if we can better look at how the validation classes appear when the user edits. Change the h6 element to:
Now you’ll see Angular change the css classes applied to the field as data is entered:
I find these tools useful when visualizing problems in the form.