Lets create a social media app (Part 1 - The Forms)
05 Feb 2016
In this tutorial series we’ll try to build a social media app with Angular 2.
This application will be like a stripped down Facebook. So there will be a register-/login form, profiles and so on.
The great thing about this app is that we can use all of the core features of Angular2. So lets dive right into it.
If you want to have the same styles as I have, you need to use: bootstrap-paper-css.
Note: Since there are already a lot of really good basic tutorials I may not explain everything.
If you have trouble to follow, feel free to checkout the Angular2 form and Angular2 template syntax guide.
Goal Of This Part
In this part we want to build a form that will look like this:
At first we’ll program a little example with Control,
Validators to see how they work.
After that we’ll write our own custom controls and validators which will be more efficient for our use case.
The First Field
Before we get to the coding part make sure you have a folder structure like this:
The app.component.ts file is pretty straight forward:
If you don’t know what the bootstrap.ts is, read my Angular2 setup tutorial.
Don’t be scared if you get an error at the moment. Its because we haven’t created the Registercomponent. <br> <br>
As you may have experienced, forms can get really big and intimidating. So lets take a look at a basic register form
with only 1 field that behaves similarly to the example above:
Note: This example only shows 1 field.
HOLY COW that’s a lot of code/template for just 1 field. I’ll promise you that at the end of this tutorial this will look way better,
but for now we leave it as it is and talk a little bit about controls.
How Controls Work
Controls are pretty straight forward in Angular2. You could create a Controlgroup like this:
So what’s happening here? At first we’ve created our Control objects with an empty string and a validator.
The empty string is the initial value of that control.
The second parameter tells us that the field on which the control is applied is required.
For example if you apply the username control on a username input field it would be invalid as long as no username has been entered.
But we don’t want to watch only a single input field, instead we are interested in the whole form.
To achieve that we just wrap the form control around all controls that are important.
Since this is a lot of code we can shorten this a little bit by injecting the formbuilder and use him like this:
This is the equivalent to the code given above.
You want to know a little bit more about this topic? Then go to: Angular2 - Forms
Build Form Field Components
To shorten our register component we want to encapsulate this code:
And to use that component we want to have code that looks something like this:
That looks nice, does it? Well let’s see how we can achieve that.
At first we create a new typescript file under the folder form/field and we call that file Formfield.ts (not the best name but ok for this tutorial).
The file will look like this:
Let’s take a little deeper look what each part actually does.
This part will color our input field red as soon as the given control is not valid and the value of the input has changed.
Here we’re applying the type(text/email…), which came as an input variable, and the control.
The control is used to validate the field. More on this in the next chapter.
Last but not least we got this snippet:
This will show the red bar right under the input as soon as the user has touched the input field and it is invalid.
Wow that was actually pretty easy. Now we can reuse this form field everywhere we want… BUT wait.
The error message will always be the same no matter what the actual error actually was. We have to change that.
Technically we could provide the error message via an input variable to this component, but this wouldn’t be
a good approach, since we have to declare the same error message every time we want to use the same formfield.
Furthermore the best approach would be to define our error message within the validator, because he is responsible
for the given error. So lets see how we can do this.
Build Custom Validations and Controls
As we’ve seen before, our error message is fix. To get around that we’ll first build a custom validator.
This validator will check if our username starts with a letter and has at least 3 characters.
We place our formfieldvalidator.service.ts file right under the validation folder.
Ok now I’m pretty sure you have a couple of questions. Why do we need that interface?
Firstly we are a little bit more expressive with our expected return. But this doesn’t explain
why we are returning an object anyway. Why not a string? Well for that we have to look in the AbstractControl
class (the Control class inherits from AbstractControl):
As you can see the error field is just a map where each key is a string and the value can be anything.
This is important because we can actually override that field and add
the desired behavior. So lets do this by creating our custom Control within the form/control folder and
call it FormControl.ts :
Ok, cool. Now our errors will contain of ValidationResults(which are currently only strings). These Results
have a message that we access via our getter. Wow that was a lot of stuff and not that easy to understand.
If you want you can check my Github repo and take your 10minutes to grasp everything.
I’m not sure either if that is best practice but I’m actually pretty satisfied with the result.
If we put everything together our final register form looks like this:
Lastly you have to change the control within the FormFieldComponent to:
Wow this looks way better than our first register component :). Note: We can’t use the formbuilder anymore. I’m not entirely sure why it’s not working,
but this code isn’t more complex than the code with the formbuilder.
Since I haven’t shown all validators you may want to visit my Github page
I hope you liked this tutorial. If you have any questions feel free to ask me.