#Angular and Asp.Net 3 Core: Quick X-Ray into form properties

download.jpgOnce 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:

<h6>{{classTest|json}}</h6>

You’ll see this:

2019-11-09 20_06_43-PluralSiteAngularForms.png

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:

<h6>{{classTest.className|json}}</h6>

Now you’ll see Angular change the css classes applied to the field as data is entered:

2019-11-09 20_09_59-PluralSiteAngularForms.png

I find these tools useful when visualizing problems in the form.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s