The Ultimate Guide to Forms in Angular 2

Editor's Note: Post up-to-date with Angular 2 version angular-2.0.0-rc.6

Forms are Crucial, Forms are Complex

Forms are probably the most crucial aspect of your web application. While we often get events from clicking on links or moving the mouse, it's through forms where we get the majority of our rich data input from users.

On the surface, forms seem straightforward: you make an input tag, the user fills it out, and hits submit. How hard could it be?

It turns out, forms can end up being really complex. Here's a few reasons why:

  • Form inputs are meant to modify data, both on the page and the server
  • Changes often need to be reflected elsewhere on the page
  • Users have a lot of leeway in what they enter, so you need to validate values
  • The UI needs to clearly state expectations and errors, if any
  • Dependent fields can have complex logic
  • We want to be able to test our forms, without relying on DOM selectors

Thankfully, Angular 2 has tools to help with all of these things.

  • FormControls encapsulate the inputs in our forms and give us objects to work with them
  • Validators give us the ability to validate inputs, any way we'd like
  • Observers let us watch our form for changes and respond accordingly

In this chapter we're going to walk through building forms, step by step. We'll start with some simple forms and build up to more complicated logic.

FormControls and FormGroups

The two fundamental objects in Angular 2 forms are FormControl and FormGroup.

FormControl

A FormControl represents a single input field - it is the smallest unit of an Angular form.

FormControls encapsulate the field's value, and states such as if it is valid, dirty (changed), or has errors.

For instance, here's how we might use a FormControl in TypeScript:

To build up forms we create FormControls (and groups of FormControls) and then attach metadata and logic to them.

Like many things in Angular, we have a class (FormControl, in this case) that we attach to the DOM with an attribute (formControl, in this case). For instance, we might have the following in our form:

This will create a new FormControl object within the context of our form. We'll talk more about how that works below.

FormGroup

Most forms have more than one field, so we need a way to manage multiple FormControls. If we wanted to check the validity of our form, it's cumbersome to iterate over an array of FormControls and check each FormControl for validity. FormGroups solve this issue by providing a wrapper interface around a collection of FormControls.

Here's how you create a FormGroup:

FormGroup and FormControl have a common ancestor (AbstractControl). That means we can check the status or value of personInfo just as easily as a single FormControl:

Notice that when we tried to get the value from the FormGroup we received an object with key-value pairs. This is a really handy way to get the full set of values from our form without having to iterate over each FormControl individually.

Our First Form

There are lots of moving pieces to create a form, and several important ones we haven't touched on. Let's jump in to a full example and I'll explain each piece as we go along.

Here's a screenshot of the very first form we're going to build:

Demo Form with Sku: Simple Version
Demo Form with Sku: Simple Version

In our imaginary application we're creating an e-commerce-type site where we're listing products for sale. In this app we need to store the product's SKU, so let's create a simple form that takes the SKU as the only input field.

SKU is an abbreviation for "stockkeeping unit". It's a term for a unique id for a product that is going to be tracked in inventory. When we talk about a SKU, we're talking about a human-readable item ID.

Our form is super simple: we have a single input for sku (with a label) and a submit button.

Let's turn this form into a Component. If you recall, there are three parts to defining a component:

  • Configure the @Component() annotation
  • Create the template
  • Implement custom functionality in the component definition class

Let's take these in turn:

Loading the FormsModule

In order to use the new forms library we need to first make sure we import the forms library in our NgModule.

There are two ways of using forms in Angular and we'll talk about them both in this chapter: using FormsModule or using ReactiveFormsModule. Since we'll use both, we'll import them both into our module. To do this we do the following in our app.ts where we bootstrap the app:

This ensures that we're able to use the form directives in our views. At the risk of jumping ahead, the FormsModule gives us template driven directives such as:

  • ngModel and
  • NgForm

Whereas ReactiveFormsModule gives us directives like

  • formControl and
  • ngFormGroup

... and several more. We haven't talked about how to use these directives or what they do, but we will shortly. For now, just know that by importing FormsModule and ReactiveFormsModule into our NgModule means we can use any of the directives in that list in our view template or inject any of their respective providers into our components.

Simple SKU Form: @Component Annotation

Now we can start creating our component:

Here we define a selector of demo-form-sku. If you recall, selector tells Angular what elements this component will bind to. In this case we can use this component by having a demo-form-sku tag like so:

Simple SKU Form: template

Let's look at our template:

form & NgForm

Now things get interesting: because we imported FormsModule, that makes NgForm available to our view. Remember that whenever we make directives available to our view, they will get attached to any element that matches their selector.

NgForm does something handy but non-obvious: it includes the form tag in its selector (instead of requiring you to explicitly add ngForm as an attribute). What this means is that if you import FormsModule, NgForm will get automatically attached to any <form> tags you have in your view. This is really useful but potentially confusing because it happens behind the scenes.

There are two important pieces of functionality that NgForm gives us:

  1. A FormGroup named ngForm
  2. A (ngSubmit) output

You can see that we use both of these in the <form> tag in our view:

First we have #f="ngForm". The #v=thing syntax says that we want to create a local variable for this view.

Here we're creating an alias to ngForm, for this view, bound to the variable #f. Where did ngForm come from in the first place? It came from the NgForm directive.

And what type of object is ngForm? It is a FormGroup. That means we can use f as a FormGroup in our view. And that's exactly what we do in the (ngSubmit) output.

Astute readers might notice that I just said above that NgForm is automatically attached to <form> tags (because of the default NgForm selector), which means we don't have to add an ngForm attribute to use NgForm. But here we're putting ngForm in an attribute (value) tag. Is this a typo?

No, it's not a typo. If ngForm were the key of the attribute then we would be telling Angular that we want to use NgForm on this attribute. In this case, we're using ngForm as the attributewhen we're assigning a _reference_. That is, we're saying the value of the evaluated expressionngFormshould be assigned to a local template variablef`.

ngForm is already on this element and you can think of it as if we are "exporting" this FormGroup so that we can reference it elsewhere in our view.

We bind to the ngSubmit action of our form by using the syntax: (ngSubmit)="onSubmit(f.value)".

  • (ngSubmit) - comes from NgForm
  • onSubmit() - will be implemented in our component definition class (below)
  • f.value - f is the FormGroup that we specified above. And .value will return the key/value pairs of this FormGroup

Put it all together and that line says "when I submit the form, call onSubmit on my component instance, passing the value of the form as the arguments".

input & NgModel

Our input tag has a few things we should touch on before we talk about NgModel:

  • class="ui form" and class="field" - these two classes are totally optional. They come from the CSS framework Semantic UI. I've added them in some of our examples just to give them a nice coat of CSS but they're not part of Angular.
  • The label "for" attribute and the input "id" attribute are to match, as per W3C standard
  • We set a placeholder of "SKU", which is just a hint to the user for what this input should say when it is blank

The NgModel directive specifies a selector of ngModel. This means we can attach it to our input tag by adding this sort of attribute: ngModel="whatever". In this case, we specify ngModel with no attribute value.

There are a couple of different ways to specify ngModel in your templates and this is the first. When we us ngModel with no attribute value we are specifying:

  1. a one-way data binding
  2. we want to create a FormControl on this form with the name sku (because of the name attribute on the input tag)

NgModel creates a new FormControl that is automatically added to the parent FormGroup (in this case, on the form) and then binds a DOM element to that new FormControl. That is, it sets up an association between the input tag in our view and the FormControl and the association is matched by a name, in this case "sku".

NgModel vs. ngModel: what's the difference? Generally, when we use PascalCase, like NgModel, we're specifying the class and referring to the object as it's defined in code. The lower case (CamelCase), as in ngModel, comes from the selector of the directive and it's only used in the DOM / template.

It's also worth pointing out that NgModel and FormControl are separate objects. NgModel is the directive that you use in your view, whereas FormControl is the object used for representing the data and validations in your form.

Sometimes we want to do two-way binding with ngModel like we used to do in Angular 1. We'll look at how to do that towards the end of this chapter.

Simple SKU Form: Component Definition Class

Now let's look at our class definition:

Here our class defines one function: onSubmit. This is the function that is called when the form is submitted. For now, we'll just console.log out the value that is passed in.

Try it out!

Putting it all together, here's what our code listing looks like:

If we try this out in our browser, here's what it looks like:

Demo Form with Sku: Simple Version, Submitted
Demo Form with Sku: Simple Version, Submitted

Using FormBuilder

Building our FormControls and FormGroups implicitly using ngForm and ngControl is convenient, but doesn't give us a lot of customization options. A more flexible and common way to configure forms is to use a FormBuilder.

FormBuilder is an aptly-named helper class that helps us build forms. As you recall, forms are made up of FormControls and FormGroups and the FormBuilder helps us make them (you can think of it as a "factory" object).

Let's add a FormBuilder to our previous example. Let's look at:

  • how to use the FormBuilder in our component definition class
  • how to use our custom FormGroup on a form in the view

Reactive Forms with FormBuilder

For this component we're going to be using the formGroup and formControl directives which means we need to import the appropriate classes. We start by importing them like so:

Using FormBuilder

We inject FormBuilder by creating an argument in the constructor of our component class:

During injection an instance of FormBuilder will be created and we assign it to the fb variable (in the constructor).

There are two main functions we'll use on FormBuilder:

  • control - creates a new FormControl
  • group - creates a new FormGroup

Notice that we've setup a new instance variable called myForm on this class. (We could have just as easily called it form, but I want to differentiate between our FormGroup and the form we had before.)

myForm is typed to be a FormGroup. We create a FormGroup by calling fb.group(). .group takes an object of key-value pairs that specify the FormControls in this group.

In this case, we're setting up one control sku, and the value is ["ABC123"] - this says that the default value of this control is "ABC123". (You'll notice that is an array. That's because we'll be adding more configuration options there later.)

Now that we have myForm we need to use that in the view (i.e. we need to bind it to our form element).

Using myForm in the view

We want to change our <form> to use myForm. If you recall, in the last section we said that ngForm is applied for us automatically when we use FormsModule. We also mentioned that ngForm creates its own FormGroup. Well, in this case, we don't want to use an outside FormGroup. Instead we want to use our instance variable myForm, which we created with our FormBuilder. How can we do that?

Angular provides another directive that we use when we have an existing FormGroup: it's called formGroup and we use it like this:

Here we're telling Angular that we want to use myForm as the FormGroup for this form.

Remember how earlier we said that when using FormsModule that NgForm will be automatically applied to a <form> element? There is an exception: NgForm won't be applied to a <form> that has formGroup.

If you're curious, the selector for NgForm is:

This means you could have a form that doesn't get NgForm applied by using the ngNoForm attribute.

We also need to change onSubmit to use myForm instead of f, because now it is myForm that has our configuration and values.

There's one last thing we need to do to make this work: bind our FormControl to the input tag. Remember that ngControl creates a new FormControl object, and attaches it to the parent FormGroup. But in this case, we used FormBuilder to create our own FormControls.

When we want to bind an existing FormControl to an input we use formControl:

Here we are instructing the formControl directive to look at myForm.controls and use the existing sku FormControl for this input.

Try it out!

Here's what it looks like all together:

Remember:

To create a new FormGroup and FormControls implicitly use:

  • ngForm and
  • ngModel

But to bind to an existing FormGroup and FormControls use:

  • formGroup and
  • formControl

Adding Validations

Our users aren't always going to enter data in exactly the right format. If someone enters data in the wrong format, we want to give them feedback and not allow the form to be submitted. For this we use validators.

Validators are provided by the Validators module and the simplest validator is Validators.required which simply says that the designated field is required or else the FormControl will be considered invalid.

To use validators we need to do two things:

  1. Assign a validator to the FormControl object
  2. Check the status of the validator in the view and take action accordingly

To assign a validator to a FormControl object we simply pass it as the second argument to our FormControl constructor:

Or in our case, because we're using FormBuilder we will use the following syntax:

Now we need to use our validation in the view. There are two ways we can access the validation value in the view:

  1. We can explicitly assign the FormControl sku to an instance variable of the class - which is more verbose, but gives us easy access to the FormControl in the view.
  2. We can lookup the FormControl sku from myForm in the view. This requires less work in the component definition class, but is slightly more verbose in the view.

To make this difference clearer, let's look at this example both ways:

Explicitly setting the sku FormControl as an instance variable

Here's a screenshot of what our form is going to look like with validations:

Demo Form with Validations
Demo Form with Validations

The most flexible way to deal with individual FormControls in your view is to set each FormControl up as an instance variable in your component definition class. Here's how we could setup sku in our class:

Notice that:

  1. We setup sku: AbstractControl at the top of the class and
  2. We assign this.sku after we've created myForm with the FormBuilder

This is great because it means we can reference sku anywhere in our component view. The downside is that by doing it this way, we'd have to setup an instance variable for every field in our form. For large forms, this can get pretty verbose.

Now that we have our sku being validated, I want to look at four different ways we can use it in our view:

  1. Checking the validity of our whole form and displaying a message
  2. Checking the validity of our individual field and displaying a message
  3. Checking the validity of our individual field and coloring the field red if it's invalid
  4. Checking the validity of our individual field on a particular requirement and displaying a message

Form message

We can check the validity of our whole form by looking at myForm.valid:

Remember, myForm is a FormGroup and a FormGroup is valid if all of the children FormControls are also valid.

Field message

We can also display a message for the specific field if that field's FormControl is invalid:

Field coloring

I'm using the Semantic UI CSS Framework's CSS class .error, which means if I add the class error to the <div class= "field"> it will show the input tag with a red border.

To do this, we can use the property syntax to set conditional classes:

Notice here that we have two conditions for setting the .error class: We're checking for !sku.valid and sku.touched. The idea here is that we only want to show the error state if the user has tried editing the form ("touched" it) and it's now invalid.

To try this out, enter some data into the input tag and then delete the contents of the field.

Specific validation

A form field can be invalid for many reasons. We often want to show a different message depending on the reason for a failed validation.

To look up a specific validation failure we use the hasError method:

Note that hasError is defined on both FormControl and FormGroup. This means you can pass a second argument of path to lookup a specific field from FormGroup. For example, we could have written the previous example as:

Putting it together

Here's the full code listing of our form with validations with the FormControl set as an instance variable:

Removing the sku instance variable

In the example above we set sku: AbstractControl as an instance variable. We often wont want to create an instance variable for each AbstractControl, so how would we reference this FormControl in our view without an instance variable?

Instead we can use the myForm.controls property as in:

In this way we can access the sku control without being forced to explicitly add it as an instance variable on the component class.

Custom Validations

We often are going to want to write our own custom validations. Let's take a look at how to do that.

To see how validators are implemented, let's look at Validators.required from the Angular core source:

A validator:
- Takes a FormControl as its input and
- Returns a StringMap<string, boolean> where the key is "error code" and the value is true if it fails

Writing the Validator

Let's say we have specific requirements for our sku. For example, say our sku needs to begin with 123. We could write a validator like so:

This validator will return an error code invalidSku if the input (the control.value) does not begin with 123.

Assigning the Validator to the FormControl

Now we need to add the validator to our FormControl. However, there's one small problem: we already have a validator on sku. How can we add multiple validators to a single field?

For that, we use Validators.compose:

Validators.compose wraps our two validators and lets us assign them both to the FormControl. The FormControl is not valid unless both validations are valid.

Now we can use our new validator in the view:

Note that in this section, I'm using "explicit" notation of adding an instance variable for each FormControl. That means that in the view in this section, sku refers to a FormControl.

If you run the sample code, one neat thing you'll notice is that if you type something in to the field, the required validation will be fulfilled, but the invalidSku validation may not. This is great - it means we can partially-validate our fields and show the appropriate messages.

Watching For Changes

So far we've only extracted the value from our form by calling onSubmit when the form is submitted. But often we want to watch for any value changes on a control.

Both FormGroup and FormControl have an EventEmitter that we can use to observe changes.

EventEmitter is an Observable, which means it conforms to a defined specification for watching for changes. If you're interested in the Observable spec, you can find it here

To watch for changes on a control we:

  1. get access to the EventEmitter by calling control.valueChanges. Then we
  2. add an observer using the .observer method

Here's an example:

Here we're observing two separate events: changes on the sku field and changes on the form as a whole.

The observable that we pass in is an object with a single key: next (there are other keys you can pass in, but we're not going to worry about those now). next is the function we want to call with the new value whenever the value changes.

If we type 'kj' into the text box we will see in our console:

As you can see each keystroke causes the control to change, so our observable is triggered. When we observe the individual FormControl we receive a value (e.g. kj), but when we observe the whole form, we get an object of key-value pairs (e.g. {sku: "kj"}).

ngModel

NgModel is a special directive: it binds a model to a form. ngModel is special in that it implements two-way data binding. Two-way data binding is almost always more complicated and difficult to reason about vs. one-way data binding. Angular 2 is built to generally have data flow one-way: top-down. However, when it comes to forms, there are times where it is easier to opt-in to a two-way bind.

Just because you've used ng-model in Angular 1 in the past, don't rush to use ngModel right away. There are good reasons to avoid two-way data binding. Of course, ngModel can be really handy, but know that we don't necessarily rely on two-way data binding it as much as we did in Angular 1.

Let's change our form a little bit and say we want to input productName. We're going to use ngModel to keep the component instance variable in sync with the view.

First, here's our component definition class:

Notice that we're simply storing productName: string as an instance variable.

Next, let's use ngModel on our input tag:

Now notice something - the syntax for ngModel is funny: we are using both brackets and parenthesis around the ngModel attribute! The idea this is intended to invoke is that we're using both the input [] brackets and the output () parenthesis. It's an indication of the two-way bind.

Notice something else here: we're still using formControl to specify that this input should be bound to the FormControl on our form. We do this because ngModel is only binding the input to the instance variable - the FormControl is completely separate. But because we still want to validate this value and submit it as part of the form, we keep the formControl directive.

Last, let's display our productName value in the view:

Here's what it looks like:

Demo Form with ngModel
Demo Form with ngModel

Easy!

Wrapping Up

Forms have a lot of moving pieces, but Angular 2 makes it fairly straightforward. Once you get a handle on how to use FormGroups, FormControls, and Validations, it's pretty easy going from there!

This post is an excerpt from ng-book 2: The Complete Guide to Angular 2. If you'd like to become and Angular 2 expert in a few hours, then checkout ng-book 2.
  • Lars Jeppesen

    Whoaa.. this is a gold mine right there…. thank you
    I already bought the book, it’s coming along fine!

    I actually like that you guys do one chapter at a time, because this gives me some time to let things “sink in”.. thanks again

    • PolyGon2013

      This is more than a gold mine. This is life in itself. I will be buying my book within an hour from now! This is the moment I have been waiting for. This is the best time for developers!

  • Alexander Glukhovtsev

    Very well done.
    One of
    the most understandable, complete, self-descriptive
    tutorial guide reference
    that I have ever seen .

  • Vincent Bilodeau

    Is there an error there?

    because when i try to write this, the validation error appear even without touching the screen.

    SKU is invalid
    SKU is required

    so should we write this like that :

    SKU is invalid

    ?

    • https://ng-book.com/2 Fullstack.io

      Sure, I wouldn’t say that there’s a bug in the code, but you could check for touched if you want to. In this is example it’s easier to see that the form is in an invalid state right off the bat, but you’re right: it would be helpful to show how we can wait for “touched” before we show the error, because this is something we always do in real life.

  • jorge ferrando

    What is the esiest way to rest the form and the form builder???

    • Pablo Whelano

      You may of seen it but the angular site is using a

      with a resetForm like the following

      resetForm() {
      this.active = false;
      setTimeout(()=> this.active=true, 0);
      }

      The comment states

      // Reset the form AND restore ‘pristine’ class state
      // by toggling ‘active’ flag which causes the form
      // to be removed/re-added in a tick via NgIf
      // TODO: Workaround until NgForm has a reset method (#6822)

    • mumuzhenzhen

      form.controls[‘controlName’].updateValue();
      form.controls[‘controlName’].[‘_pristine’]=true;

      RC5 will release with an API reset form controls

  • przemeko

    I’ve implemented your examples in angular2-seed and I’m not sure why the value change observer is being invoked twice. First time after key up and then ones again after losing a focus from the field (it doesn’t matter whether I listen on group or control). PS I use alfa-44. Is it a bug or feature? Personally I don’t see any reason to run the notification on blur beacuse the value has not been change since key up.

  • Hitesh Khatri

    Hi There,

    I was trying to put together a form with “Date” field and I used “Input type=’date’ “

    in my model, I have a date field which I initialise with new Date(199,03,22) , but that date is not visible as default value and When I look at the logs on console, I see following warning.

    “The specified value does not conform to the required format, ‘yyyy-MM-dd’.”

    also, when I change the date value, I get following error.

    Invalid argument ‘2015-11-05’ for pipe ‘function DatePipe() {}’ in [null]

    Any ideas??

    • Giorgi Kochakidze

      that is because your object type is Date. you should change it to string with format “YYYY-MM-DD” . that will solve it 🙂

      this.date = moment(new Date).format(‘YYYY-MM-DD’);

      this should work. moment.js is library you can use any library you want.

  • Cody Lundquist

    What’s the difference between and ?

  • Pingback: The Ultimate Guide to Forms in Angular 2 « ng-book.com – blog - angular.org.il()

  • Hammad Tariq

    best blog related to forms…. i want to match my confirm password input field with my password field but on trying the last part related to ng-model i am unable to validate my form as it gives an error of “cannot find control with that name”. it would be great if u can help me on this.

  • Sean

    Thanks for a great article on forms…… I just posted a massive Angular 2 bootstrap project. Anyone interested om Angular 2 will love it. Check out the working demo @ http://ng2.javascriptninja.io and source at: https://github.com/born2net/ng2Boilerplate

    regards

    Sean.

  • Brendan Alexander

    Super helpful post thank you! Note: I was only able to get the custom validator to work in the following format:

    SKU must begin with 123

  • Sean

    I am using this in my new project…
    I posted a massive Angular 2 bootstrap project. Anyone interested om Angular 2 will love it. Check out the working

    demo @ http://ng2.javascriptninja.io

    and source at:

    https://github.com/born2net/ng2Boilerplate

    regards

    Sean.

    • mashhoodr

      @disqus_HYOWKKyPDD:disqus awesome demo!

  • Sean

    can you please explain what do you mean “The observable that we pass in is an object with a single key: next” … as I see we just get an Observable … what do you mean single key next? As opposed to a different kind of an Observable?

    by the way, I bought the book and it’s priceless… so TX for that…

    Regards,

    Sean – http://DigitalSignage.com

    ____________________________________________
    MediaSignage.com, FREE Digital Signage for everyone!
    5776-D Lindero Cyn Rd #182
    Westlake Village, CA 91362
    Phone: 1.877.DIG.SIGN (1-877-344-7446)
    Fax: 1.818.337.0442
    Live support: http://chat.digitalsignage.com

  • Mubashshir

    How to reset form’s validation on submission of the form ?

  • Mikael Lepistö

    Awesome article! One thing I am still missing is what is the preferred way to do validation where result of the validation depends on values of 2 separate controls? e.g. classic give password / verify password problem.

    Edit: an exmaple like this https://angular.io/docs/js/latest/api/common/FormBuilder-class.html

  • Pablo Whelano

    Great stuff thanks for the very clear explaination

  • ZiLang

    Great tutorial. But I have one question. The custom validator only support one control. I have two controls, one for password, the other is for password confirmation. What should I do if I want to compare those two password in my validator?

  • drumaddict71

    Great!! Best material for ng2 forms on the net,by far! One question though,can I nest control groups (so that when I get the submitted value it’s a nested object with the structure my server API expects).And how do I bind to them in the form inputs ?

  • Paca-vaca

    Thank you for such a great article!

  • http://www.treynb.com yuyangyang

    Nice Article!!!

  • Santhosh Kumar B

    Thanks for the great article. One issue I am having is to figure out how to unit test ngFormModel and ngFormControl using Jasmine. Couldn’t find any resources on it. I am able to set the form value, but cannot change the valid or dirty fields. Any help on that front?

  • Sarah

    Is there an updated link for the complete list accessed by FORM_DIRECTIVES?

  • http://leon.radley.se/ Leon

    I’m missing a part, which is If I want to enclose a couple of inputs in a custom component, how can I pass down the form or ngControlGroup to the child component?

  • tristanchanning

    Great post, thank you. The link to the form directives is broken. Current link is: https://github.com/angular/angular/blob/master/modules/%40angular/common/src/forms/directives.ts

  • Dzivo

    Really nice thx for the long explanation. Learned a lot. I have a problem with class=’ui form’ i need to remove it and than my validation works othervise it doesnt. Any suggestions ?

  • sallimy

    I had try this , it can work and without error . Is there an error there? my angular version is 2.0.0-rc.1.

    SKU

  • Hatem Ashour

    how i can open (another component.html) from submit which is related to Form login

  • Webia1
  • Sean

    be great if we could this awesome page updated to new forms in rc.3

    I started updating Angular 2 Kitchen sink: http://ng2.javascriptninja.io

    Regards,

    Sean

  • Saiful Azhar

    Alright.. I’ll HAVE to buy the book -___-

  • mumuzhenzhen

    I think this chapter from ngbook2 does not a a good structure and mixed template driven and model driven together.

  • sharpmachine

    Correct me if I’m wrong but I think you can use formControlName="productName" instead of the more verbose [formControl]="myForm.find('productName')"

  • Webia1

    I’ve already purchased the book, but unfornutately there is no information about multi-step-forms and exchange data between them. It would be great, if you could include this topic too. Great work at all, thank you very much!

  • Webia1
  • Hoang Nguyen

    Love this 🙂

  • Azr

    Does anyone noticed that onSubmit() is fired twice when you use component from example? Why is this happening?

  • Maarten Doek

    Validators.compose in RC4 is not necessary anymore, just use [Validators.Required, etc] for grouping multiple validators

  • Anshuman Jaiswal

    when you will update this according to rc.5?

  • David

    I think In the example after “When we want to bind an existing FormControl to an input we use formControl:”, the formControl attribute is missing?

  • Thusitha Manathunga

    As for the latest release, use ReactiveFormsModule instead of FormsModule. This will enable you to create using FormBuilder inside Component. I think the latter part of form creating in this book is deprecated. The correct way is details here. http://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html

  • Victor Pastor

    If I want to use the form more than once (FormBuilder) the form looses the validators, try to recall the component the same, form cannot be used. How can I reset or refresh the form without loosing validators as first time is called?

  • Patrick

    Best guide on Angular2 Forms I have found so far! Big Thanks

  • Andres Fulla

    Thank you for sharing this, it covers pretty much everything. Although, at the beginning you talk about the complexity dependent fields, is there a way to tackle that through the regular way to add validators? Or is it mandatory to subscribe to changes to perform that kind of validation?

  • Brian Richardson

    Awesome post – very helpful. Cheers!

  • David Elsner

    “Remember that ngControl creates a new FormControl object” – What I remember is, that ngModel creates a new FormControl object. Where is the difference between ngModel and ngControl in this case?

  • Adrian Rivera

    God bless you, sir.

  • tombrokeoff

    I have a very simple login form. Everything is working great, but the problem is, when Chrome auto fills in the username and password, the form does not update and still appears invalid meaning I can not submit. I have to click into one of the input field for it to update. Is there a solution for this? TIA…

  • Temitayo

    This is a nice piece

  • Brian Quinn

    Is NgFormModel with ngControl an outdated way to use forms? The book I’m reading suggests this approach. Google says the form is an old form and I should update. In any case when I try to do an update with the form the changed values are not reflected in the form object. Its very strange.

  • http://www.iziuse.com Reza Rahmati

    Great article

  • http://www.clickteck.com/ Shairyar Baig

    Great article, after reading this I went through the reactive forms documentations as well https://angular.io/docs/ts/latest/guide/reactive-forms.html things make a lot more sense