Angular 2.0 final was made official just a few days ago and there’s never been a better time to dive in. In the last few weeks, we saw some pretty radical changes to the framework with:

• the addition of the Ahead-of-Time (AoT) compiler
• introduction of the @NgModule decorator
• a new Forms Module

In this tutorial we are going to look at what’s changed with forms and more importantly how to handle form validation the right way with Angular 2.

Forms bring life to our applications. It’s how we capture user input and make our applications useful. For a long time, forms have been difficult to get right. Angular 1.x made it a little easier, but came with its own set of issues and challenges, and some features like sane validation didn’t come until the framework was well into it’s 5th year.

Destructuring is a new feature introduced in ES6 which allows you to easily extract values from Objects or Arrays and assign to new values or even assign default values to undefined properties.

Consider the following code.

const name = user.name
const gender = user.gender
const age = user.age

console.log(name);

---

dave

Here we have a user Object with keys for name, gender and age and we want to extract the values of these keys and assign them to their own variables. In this example we are defining new variable names and assigning the value of each of the required properties of the user Object to those variables so that we can work with then separately.