In this episode, we build a reactive form for classified ads that will stay connected to the Firebase Realtime Database. Check out the full code and lesson here: https://angularfirebase.com/lessons/reactive-forms-in-angular-with-the-firebase-database/
2024-02-04T08:17:23.460Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
db8bff8a-a879-4535-88e4-3d8c57d8496e
27ea49a1c3e51a07157392324fa05b1744fd71c89f9f7f0da7aaf22fc10f95ef
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Angular's reactive form module allows you to build reliable yet complex forms throughout your application.
In this episode, we're going to talk about how to use the reactive form module along with the Firebase real time database.
What we're building is just a simple form for classified ads.
Rather than use a traditional form submit button, we're going to update the form in the database anytime a value changes.
In my opinion, this provides a better user experience and it also prevents data from being lost if the page is refreshed.
So what is a reactive form?
Basically, it's just a form that's been defined in the component TypeScript to give it a synchronous flow of data.
This gives you better control over logic and validation as well as making testing a lot easier.
The other type of form is a template driven form which uses ng model to build the form in the component HTML.
The benefit is that you can create forms with less code.
However, the drawback is that They're harder to maintain especially as the form grows larger and more complex.
So a good rule to follow is if you're building a big complex form, you should probably go with the reactive form module.
Reactive forms are kept in their own module, so we'll need to import that in whichever module we plan on using it in.
In this example, we import the reactive forms module into our app module and then add it to the import section.
Now we can start building the ad service that will get data from Firebase for our classified ads.
I'm also going to create an ad listing class, which will populate some default data whenever we start a new ad from scratch.
So our classified ads will have a title, some content, a price, and an image.
From there, we can inject the AngularFire database, and then we'll create a function that will create a new ad in the database.
This function will push a new ad listing to a Firebase list observable.
But instead of returning that full list observable, we'll just grab the key and then return the newly created object as an object observable.
You can call key after you call push and that'll return the push key from Firebase.
Then you can just pass that key to another object observable query.
Then we'll create another function that will just update an existing object in the database with new data.
Now let's go into the component type script.
We will import the add service and also form group, form builder, and validators from Angular forms.
Then we'll set up a variable for add, which is just the Firebase object observable, and also add form, which will be a form group.
Then we inject our ad service and the form builder in the constructor.
The way our feature works is that when the user clicks the button to create a add listing.
It will save some default data in the database and then allow them to edit it from there.
The next step is to build the form itself.
So we create a function called build form, and then we define the add form variable using the form builder group function, and we pass a bunch of attributes that have validators attached to them.
These validators are based on constraint validations in JavaScript, and you can attach as many as you want to each attribute.
In order to sync our data up with Firebase, we need to subscribe to the object observable, and then we'll populate this reactive form with that value by calling the patch value method on it.
The only other function we need in the component is an event handler that will save the new data to Firebase anytime a form value changes.
I also add a conditional statement here to see if the form is valid.
And if it's not valid, we just for turn so we can't add invalid data to the database from the front end.
You should also add back end database validation rules in Firebase just to make sure your data is 100% here.
In the HTML, the first thing we'll do is create a preview of the ad, which just will take the various attributes and apply the async pipe as well as the attribute we wanna show.
All pretty basic stuff here.
There's a lot of HTML to get through here, so be sure to check out the link in the description to get the full code used in this lesson.
You add reactive forms to the HTML by binding the form group to an HTML form itself.
From there, you can start adding form inputs to it.
And the important part here is that when you add an input, you add the form control name with the attribute that it's controlling.
So in other words, this form input will control the title on our classified ad.
And whenever this value changes, it will update the Firebase database.
Then we use ng class to apply either a red border when the form is not valid or a green border when this form attribute is valid.
We get the validity state by calling add form dot get with the attribute we want and then valid which will return either true or false.
We We also wanna check for the dirty state because we don't want the form to have a bunch of red borders when it's first loaded.
The end result is the toggling of red and green classes when the form value empty.
We can also use this to display helpful messages to the user when a form value is invalid.
In this case, if the title's missing, we'll show a message that says title is acquired.
We can follow the same exact approach for every other form input and again I post the code on angularfirebase.com if you wanna check out the entire thing.
Now going back into the app, you can see that when we update the form, it also updates the Firebase database after every form change event occurs.
If you want a more traditional form experience, you could just add a button here and then fire the update function whenever the user clicks that button.
That's it for reactive forms with Angular 4 and Firebase.
If this video helps you, please like and subscribe.
And if you have any suggestions or if you wanna support the channel, to becoming a pro member at angularfirebase.com.
Thanks for watching, and I'll see you next time.

Speaker 0: Angular's reactive form module allows you to build reliable yet complex forms throughout your application. In this episode, we're going to talk about how to use the reactive form module along with the Firebase real time database. What we're building is just a simple form for classified ads. Rather than use a traditional form submit button, we're going to update the form in the database anytime a value changes. In my opinion, this provides a better user experience and it also prevents data from being lost if the page is refreshed.

So what is a reactive form? Basically, it's just a form that's been defined in the component TypeScript to give it a synchronous flow of data. This gives you better control over logic and validation as well as making testing a lot easier. The other type of form is a template driven form which uses ng model to build the form in the component HTML. The benefit is that you can create forms with less code.

However, the drawback is that They're harder to maintain especially as the form grows larger and more complex. So a good rule to follow is if you're building a big complex form, you should probably go with the reactive form module. Reactive forms are kept in their own module, so we'll need to import that in whichever module we plan on using it in. In this example, we import the reactive forms module into our app module and then add it to the import section. Now we can start building the ad service that will get data from Firebase for our classified ads.

I'm also going to create an ad listing class, which will populate some default data whenever we start a new ad from scratch. So our classified ads will have a title, some content, a price, and an image. From there, we can inject the AngularFire database, and then we'll create a function that will create a new ad in the database. This function will push a new ad listing to a Firebase list observable. But instead of returning that full list observable, we'll just grab the key and then return the newly created object as an object observable.

You can call key after you call push and that'll return the push key from Firebase. Then you can just pass that key to another object observable query. Then we'll create another function that will just update an existing object in the database with new data. Now let's go into the component type script. We will import the add service and also form group, form builder, and validators from Angular forms.

Then we'll set up a variable for add, which is just the Firebase object observable, and also add form, which will be a form group. Then we inject our ad service and the form builder in the constructor. The way our feature works is that when the user clicks the button to create a add listing. It will save some default data in the database and then allow them to edit it from there. The next step is to build the form itself.

So we create a function called build form, and then we define the add form variable using the form builder group function, and we pass a bunch of attributes that have validators attached to them. These validators are based on constraint validations in JavaScript, and you can attach as many as you want to each attribute. In order to sync our data up with Firebase, we need to subscribe to the object observable, and then we'll populate this reactive form with that value by calling the patch value method on it. The only other function we need in the component is an event handler that will save the new data to Firebase anytime a form value changes. I also add a conditional statement here to see if the form is valid.

And if it's not valid, we just for turn so we can't add invalid data to the database from the front end. You should also add back end database validation rules in Firebase just to make sure your data is 100% here. In the HTML, the first thing we'll do is create a preview of the ad, which just will take the various attributes and apply the async pipe as well as the attribute we wanna show. All pretty basic stuff here. There's a lot of HTML to get through here, so be sure to check out the link in the description to get the full code used in this lesson.

You add reactive forms to the HTML by binding the form group to an HTML form itself. From there, you can start adding form inputs to it. And the important part here is that when you add an input, you add the form control name with the attribute that it's controlling. So in other words, this form input will control the title on our classified ad. And whenever this value changes, it will update the Firebase database.

Then we use ng class to apply either a red border when the form is not valid or a green border when this form attribute is valid. We get the validity state by calling add form dot get with the attribute we want and then valid which will return either true or false. We We also wanna check for the dirty state because we don't want the form to have a bunch of red borders when it's first loaded. The end result is the toggling of red and green classes when the form value empty. We can also use this to display helpful messages to the user when a form value is invalid.

In this case, if the title's missing, we'll show a message that says title is acquired. We can follow the same exact approach for every other form input and again I post the code on angularfirebase.com if you wanna check out the entire thing. Now going back into the app, you can see that when we update the form, it also updates the Firebase database after every form change event occurs. If you want a more traditional form experience, you could just add a button here and then fire the update function whenever the user clicks that button. That's it for reactive forms with Angular 4 and Firebase.

If this video helps you, please like and subscribe. And if you have any suggestions or if you wanna support the channel, to becoming a pro member at angularfirebase.com. Thanks for watching, and I'll see you next time.
Angular's reactive form module allows you to build reliable yet complex forms throughout your application. In this episode, we're going to talk about how to use the reactive form module along with the Firebase real time database. What we're building is just a simple form for classified ads. Rather than use a traditional form submit button, we're going to update the form in the database anytime a value changes. In my opinion, this provides a better user experience and it also prevents data from being lost if the page is refreshed. So what is a reactive form? Basically, it's just a form that's been defined in the component TypeScript to give it a synchronous flow of data. This gives you better control over logic and validation as well as making testing a lot easier. The other type of form is a template driven form which uses ng model to build the form in the component HTML. The benefit is that you can create forms with less code. However, the drawback is that They're harder to maintain especially as the form grows larger and more complex. So a good rule to follow is if you're building a big complex form, you should probably go with the reactive form module. Reactive forms are kept in their own module, so we'll need to import that in whichever module we plan on using it in. In this example, we import the reactive forms module into our app module and then add it to the import section.
Now we can start building the ad service that will get data from Firebase for our classified ads. I'm also going to create an ad listing class, which will populate some default data whenever we start a new ad from scratch. So our classified ads will have a title, some content, a price, and an image. From there, we can inject the AngularFire database, and then we'll create a function that will create a new ad in the database. This function will push a new ad listing to a Firebase list observable.
advertising
But instead of returning that full list observable, we'll just grab the key and then return the newly created object as an object observable. You can call key after you call push and that'll return the push key from Firebase. Then you can just pass that key to another object observable query. Then we'll create another function that will just update an existing object in the database with new data. Now let's go into the component type script. We will import the add service and also form group, form builder, and validators from Angular forms. Then we'll set up a variable for add, which is just the Firebase object observable, and also add form, which will be a form group. Then we inject our ad service and the form builder in the constructor. The way our feature works is that when the user clicks the button to create a add listing. It will save some default data in the database and then allow them to edit it from there. The next step is to build the form itself. So we create a function called build form, and then we define the add form variable using the form builder group function, and we pass a bunch of attributes that have validators attached to them. These validators are based on constraint validations in JavaScript, and you can attach as many as you want to each attribute. In order to sync our data up with Firebase, we need to subscribe to the object observable, and then we'll populate this reactive form with that value by calling the patch value method on it. The only other function we need in the component is an event handler that will save the new data to Firebase anytime a form value changes. I also add a conditional statement here to see if the form is valid. And if it's not valid, we just for turn so we can't add invalid data to the database from the front end. You should also add back end database validation rules in Firebase just to make sure your data is 100% here. In the HTML, the first thing we'll do is create a preview of the ad, which just will take the various attributes and apply the async pipe as well as the attribute we wanna show. All pretty basic stuff here. There's a lot of HTML to get through here, so be sure to check out the link in the description to get the full code used in this lesson. You add reactive forms to the HTML by binding the form group to an HTML form itself. From there, you can start adding form inputs to it. And the important part here is that when you add an input, you add the form control name with the attribute that it's controlling. So in other words, this form input will control the title on our classified ad. And whenever this value changes, it will update the Firebase database. Then we use ng class to apply either a red border when the form is not valid or a green border when this form attribute is valid. We get the validity state by calling add form dot get with the attribute we want and then valid which will return either true or false. We We also wanna check for the dirty state because we don't want the form to have a bunch of red borders when it's first loaded. The end result is the toggling of red and green classes when the form value empty. We can also use this to display helpful messages to the user when a form value is invalid. In this case, if the title's missing, we'll show a message that says title is acquired. We can follow the same exact approach for every other form input and again I post the code on angularfirebase.com if you wanna check out the entire thing. Now going back into the app, you can see that when we update the form, it also updates the Firebase database after every form change event occurs. If you want a more traditional form experience, you could just add a button here and then fire the update function whenever the user clicks that button.
That's it for reactive forms with Angular 4 and Firebase. If this video helps you, please like and subscribe. And if you have any suggestions or if you wanna support the channel, to becoming a pro member at angularfirebase.com. Thanks for watching, and I'll see you next time.
youtube
Angular's reactive form module allows you to build reliable yet complex forms throughout your application. In this episode, we're going to talk about how to use the reactive form module along with the Firebase real time database. What we're building is just a simple form for classified ads. Rather than use a traditional form submit button, we're going to update the form in the database anytime a value changes. In my opinion, this provides a better user experience and it also prevents data from being lost if the page is refreshed. So what is a reactive form? Basically, it's just a form that's been defined in the component TypeScript to give it a synchronous flow of data. This gives you better control over logic and validation as well as making testing a lot easier. The other type of form is a template driven form which uses ng model to build the form in the component HTML. The benefit is that you can create forms with less code. However, the drawback is that They're harder to maintain especially as the form grows larger and more complex. So a good rule to follow is if you're building a big complex form, you should probably go with the reactive form module. Reactive forms are kept in their own module, so we'll need to import that in whichever module we plan on using it in. In this example, we import the reactive forms module into our app module and then add it to the import section. Now we can start building the ad service that will get data from Firebase for our classified ads. I'm also going to create an ad listing class, which will populate some default data whenever we start a new ad from scratch. So our classified ads will have a title, some content, a price, and an image. From there, we can inject the AngularFire database, and then we'll create a function that will create a new ad in the database. This function will push a new ad listing to a Firebase list observable. But instead of returning that full list observable, we'll just grab the key and then return the newly created object as an object observable. You can call key after you call push and that'll return the push key from Firebase. Then you can just pass that key to another object observable query. Then we'll create another function that will just update an existing object in the database with new data. Now let's go into the component type script. We will import the add service and also form group, form builder, and validators from Angular forms. Then we'll set up a variable for add, which is just the Firebase object observable, and also add form, which will be a form group. Then we inject our ad service and the form builder in the constructor. The way our feature works is that when the user clicks the button to create a add listing. It will save some default data in the database and then allow them to edit it from there. The next step is to build the form itself. So we create a function called build form, and then we define the add form variable using the form builder group function, and we pass a bunch of attributes that have validators attached to them. These validators are based on constraint validations in JavaScript, and you can attach as many as you want to each attribute. In order to sync our data up with Firebase, we need to subscribe to the object observable, and then we'll populate this reactive form with that value by calling the patch value method on it. The only other function we need in the component is an event handler that will save the new data to Firebase anytime a form value changes. I also add a conditional statement here to see if the form is valid. And if it's not valid, we just for turn so we can't add invalid data to the database from the front end. You should also add back end database validation rules in Firebase just to make sure your data is 100% here. In the HTML, the first thing we'll do is create a preview of the ad, which just will take the various attributes and apply the async pipe as well as the attribute we wanna show. All pretty basic stuff here. There's a lot of HTML to get through here, so be sure to check out the link in the description to get the full code used in this lesson. You add reactive forms to the HTML by binding the form group to an HTML form itself. From there, you can start adding form inputs to it. And the important part here is that when you add an input, you add the form control name with the attribute that it's controlling. So in other words, this form input will control the title on our classified ad. And whenever this value changes, it will update the Firebase database. Then we use ng class to apply either a red border when the form is not valid or a green border when this form attribute is valid. We get the validity state by calling add form dot get with the attribute we want and then valid which will return either true or false. We We also wanna check for the dirty state because we don't want the form to have a bunch of red borders when it's first loaded. The end result is the toggling of red and green classes when the form value empty. We can also use this to display helpful messages to the user when a form value is invalid. In this case, if the title's missing, we'll show a message that says title is acquired. We can follow the same exact approach for every other form input and again I post the code on angularfirebase.com if you wanna check out the entire thing. Now going back into the app, you can see that when we update the form, it also updates the Firebase database after every form change event occurs. If you want a more traditional form experience, you could just add a button here and then fire the update function whenever the user clicks that button. That's it for reactive forms with Angular 4 and Firebase. If this video helps you, please like and subscribe. And if you have any suggestions or if you wanna support the channel, to becoming a pro member at angularfirebase.com. Thanks for watching, and I'll see you next time.
Angular's
angular's
reactive
reactive
form
form
module
module
allows
allows
you
you
to
to
build
build
reliable
reliable
yet
yet
complex
complex
forms
forms
throughout
throughout
your
your
application.
application
In
in
this
this
episode,
episode
we're
we're
going
going
to
to
talk
talk
about
about
how
how
to
to
use
use
the
the
reactive
reactive
form
form
module
module
along
along
with
with
the
the
Firebase
firebase
real
real
time
time
database.
database
What
what
we're
we're
building
building
is
is
just
just
a
a
simple
simple
form
form
for
for
classified
classified
ads.
ads
Rather
rather
than
than
use
use
a
a
traditional
traditional
form
form
submit
submit
button,
button
we're
we're
going
going
to
to
update
update
the
the
form
form
in
in
the
the
database
database
anytime
anytime
a
a
value
value
changes.
changes
In
in
my
my
opinion,
opinion
this
this
provides
provides
a
a
better
better
user
user
experience
experience
and
and
it
it
also
also
prevents
prevents
data
data
from
from
being
being
lost
lost
if
if
the
the
page
page
is
is
refreshed.
refreshed
So
so
what
what
is
is
a
a
reactive
reactive
form?
form
Basically,
basically
it's
it's
just
just
a
a
form
form
that's
that's
been
been
defined
defined
in
in
the
the
component
component
TypeScript
typescript
to
to
give
give
it
it
a
a
synchronous
synchronous
flow
flow
of
of
data.
data
This
this
gives
gives
you
you
better
better
control
control
over
over
logic
logic
and
and
validation
validation
as
as
well
well
as
as
making
making
testing
testing
a
a
lot
lot
easier.
easier
The
the
other
other
type
type
of
of
form
form
is
is
a
a
template
template
driven
driven
form
form
which
which
uses
uses
ng
ng
model
model
to
to
build
build
the
the
form
form
in
in
the
the
component
component
HTML.
html
The
the
benefit
benefit
is
is
that
that
you
you
can
can
create
create
forms
forms
with
with
less
less
code.
code
However,
however
the
the
drawback
drawback
is
is
that
that
They're
they're
harder
harder
to
to
maintain
maintain
especially
especially
as
as
the
the
form
form
grows
grows
larger
larger
and
and
more
more
complex.
complex
So
so
a
a
good
good
rule
rule
to
to
follow
follow
is
is
if
if
you're
you're
building
building
a
a
big
big
complex
complex
form,
form
you
you
should
should
probably
probably
go
go
with
with
the
the
reactive
reactive
form
form
module.
module
Reactive
reactive
forms
forms
are
are
kept
kept
in
in
their
their
own
own
module,
module
so
so
we'll
we'll
need
need
to
to
import
import
that
that
in
in
whichever
whichever
module
module
we
we
plan
plan
on
on
using
using
it
it
in.
in
In
in
this
this
example,
example
we
we
import
import
the
the
reactive
reactive
forms
forms
module
module
into
into
our
our
app
app
module
module
and
and
then
then
add
add
it
it
to
to
the
the
import
import
section.
section
Now
now
we
we
can
can
start
start
building
building
the
the
ad
ad
service
service
that
that
will
will
get
get
data
data
from
from
Firebase
firebase
for
for
our
our
classified
classified
ads.
ads
I'm
i'm
also
also
going
going
to
to
create
create
an
an
ad
ad
listing
listing
class,
class
which
which
will
will
populate
populate
some
some
default
default
data
data
whenever
whenever
we
we
start
start
a
a
new
new
ad
ad
from
from
scratch.
scratch
So
so
our
our
classified
classified
ads
ads
will
will
have
have
a
a
title,
title
some
some
content,
content
a
a
price,
price
and
and
an
an
image.
image
From
from
there,
there
we
we
can
can
inject
inject
the
the
AngularFire
angularfire
database,
database
and
and
then
then
we'll
we'll
create
create
a
a
function
function
that
that
will
will
create
create
a
a
new
new
ad
ad
in
in
the
the
database.
database
This
this
function
function
will
will
push
push
a
a
new
new
ad
ad
listing
listing
to
to
a
a
Firebase
firebase
list
list
observable.
observable
But
but
instead
instead
of
of
returning
returning
that
that
full
full
list
list
observable,
observable
we'll
we'll
just
just
grab
grab
the
the
key
key
and
and
then
then
return
return
the
the
newly
newly
created
created
object
object
as
as
an
an
object
object
observable.
observable
You
you
can
can
call
call
key
key
after
after
you
you
call
call
push
push
and
and
that'll
that'll
return
return
the
the
push
push
key
key
from
from
Firebase.
firebase
Then
then
you
you
can
can
just
just
pass
pass
that
that
key
key
to
to
another
another
object
object
observable
observable
query.
query
Then
then
we'll
we'll
create
create
another
another
function
function
that
that
will
will
just
just
update
update
an
an
existing
existing
object
object
in
in
the
the
database
database
with
with
new
new
data.
data
Now
now
let's
let's
go
go
into
into
the
the
component
component
type
type
script.
script
We
we
will
will
import
import
the
the
add
add
service
service
and
and
also
also
form
form
group,
group
form
form
builder,
builder
and
and
validators
validators
from
from
Angular
angular
forms.
forms
Then
then
we'll
we'll
set
set
up
up
a
a
variable
variable
for
for
add,
add
which
which
is
is
just
just
the
the
Firebase
firebase
object
object
observable,
observable
and
and
also
also
add
add
form,
form
which
which
will
will
be
be
a
a
form
form
group.
group
Then
then
we
we
inject
inject
our
our
ad
ad
service
service
and
and
the
the
form
form
builder
builder
in
in
the
the
constructor.
constructor
The
the
way
way
our
our
feature
feature
works
works
is
is
that
that
when
when
the
the
user
user
clicks
clicks
the
the
button
button
to
to
create
create
a
a
add
add
listing.
listing
It
it
will
will
save
save
some
some
default
default
data
data
in
in
the
the
database
database
and
and
then
then
allow
allow
them
them
to
to
edit
edit
it
it
from
from
there.
there
The
the
next
next
step
step
is
is
to
to
build
build
the
the
form
form
itself.
itself
So
so
we
we
create
create
a
a
function
function
called
called
build
build
form,
form
and
and
then
then
we
we
define
define
the
the
add
add
form
form
variable
variable
using
using
the
the
form
form
builder
builder
group
group
function,
function
and
and
we
we
pass
pass
a
a
bunch
bunch
of
of
attributes
attributes
that
that
have
have
validators
validators
attached
attached
to
to
them.
them
These
these
validators
validators
are
are
based
based
on
on
constraint
constraint
validations
validations
in
in
JavaScript,
javascript
and
and
you
you
can
can
attach
attach
as
as
many
many
as
as
you
you
want
want
to
to
each
each
attribute.
attribute
In
in
order
order
to
to
sync
sync
our
our
data
data
up
up
with
with
Firebase,
firebase
we
we
need
need
to
to
subscribe
subscribe
to
to
the
the
object
object
observable,
observable
and
and
then
then
we'll
we'll
populate
populate
this
this
reactive
reactive
form
form
with
with
that
that
value
value
by
by
calling
calling
the
the
patch
patch
value
value
method
method
on
on
it.
it
The
the
only
only
other
other
function
function
we
we
need
need
in
in
the
the
component
component
is
is
an
an
event
event
handler
handler
that
that
will
will
save
save
the
the
new
new
data
data
to
to
Firebase
firebase
anytime
anytime
a
a
form
form
value
value
changes.
changes
I
i
also
also
add
add
a
a
conditional
conditional
statement
statement
here
here
to
to
see
see
if
if
the
the
form
form
is
is
valid.
valid
And
and
if
if
it's
it's
not
not
valid,
valid
we
we
just
just
for
for
turn
turn
so
so
we
we
can't
can't
add
add
invalid
invalid
data
data
to
to
the
the
database
database
from
from
the
the
front
front
end.
end
You
you
should
should
also
also
add
add
back
back
end
end
database
database
validation
validation
rules
rules
in
in
Firebase
firebase
just
just
to
to
make
make
sure
sure
your
your
data
data
is
is
100%
100%
here.
here
In
in
the
the
HTML,
html
the
the
first
first
thing
thing
we'll
we'll
do
do
is
is
create
create
a
a
preview
preview
of
of
the
the
ad,
ad
which
which
just
just
will
will
take
take
the
the
various
various
attributes
attributes
and
and
apply
apply
the
the
async
async
pipe
pipe
as
as
well
well
as
as
the
the
attribute
attribute
we
we
wanna
wanna
show.
show
All
all
pretty
pretty
basic
basic
stuff
stuff
here.
here
There's
there's
a
a
lot
lot
of
of
HTML
html
to
to
get
get
through
through
here,
here
so
so
be
be
sure
sure
to
to
check
check
out
out
the
the
link
link
in
in
the
the
description
description
to
to
get
get
the
the
full
full
code
code
used
used
in
in
this
this
lesson.
lesson
You
you
add
add
reactive
reactive
forms
forms
to
to
the
the
HTML
html
by
by
binding
binding
the
the
form
form
group
group
to
to
an
an
HTML
html
form
form
itself.
itself
From
from
there,
there
you
you
can
can
start
start
adding
adding
form
form
inputs
inputs
to
to
it.
it
And
and
the
the
important
important
part
part
here
here
is
is
that
that
when
when
you
you
add
add
an
an
input,
input
you
you
add
add
the
the
form
form
control
control
name
name
with
with
the
the
attribute
attribute
that
that
it's
it's
controlling.
controlling
So
so
in
in
other
other
words,
words
this
this
form
form
input
input
will
will
control
control
the
the
title
title
on
on
our
our
classified
classified
ad.
ad
And
and
whenever
whenever
this
this
value
value
changes,
changes
it
it
will
will
update
update
the
the
Firebase
firebase
database.
database
Then
then
we
we
use
use
ng
ng
class
class
to
to
apply
apply
either
either
a
a
red
red
border
border
when
when
the
the
form
form
is
is
not
not
valid
valid
or
or
a
a
green
green
border
border
when
when
this
this
form
form
attribute
attribute
is
is
valid.
valid
We
we
get
get
the
the
validity
validity
state
state
by
by
calling
calling
add
add
form
form
dot
dot
get
get
with
with
the
the
attribute
attribute
we
we
want
want
and
and
then
then
valid
valid
which
which
will
will
return
return
either
either
true
true
or
or
false.
false
We
we
We
we
also
also
wanna
wanna
check
check
for
for
the
the
dirty
dirty
state
state
because
because
we
we
don't
don't
want
want
the
the
form
form
to
to
have
have
a
a
bunch
bunch
of
of
red
red
borders
borders
when
when
it's
it's
first
first
loaded.
loaded
The
the
end
end
result
result
is
is
the
the
toggling
toggling
of
of
red
red
and
and
green
green
classes
classes
when
when
the
the
form
form
value
value
empty.
empty
We
we
can
can
also
also
use
use
this
this
to
to
display
display
helpful
helpful
messages
messages
to
to
the
the
user
user
when
when
a
a
form
form
value
value
is
is
invalid.
invalid
In
in
this
this
case,
case
if
if
the
the
title's
title's
missing,
missing
we'll
we'll
show
show
a
a
message
message
that
that
says
says
title
title
is
is
acquired.
acquired
We
we
can
can
follow
follow
the
the
same
same
exact
exact
approach
approach
for
for
every
every
other
other
form
form
input
input
and
and
again
again
I
i
post
post
the
the
code
code
on
on
angularfirebase.com
angularfirebase.com
if
if
you
you
wanna
wanna
check
check
out
out
the
the
entire
entire
thing.
thing
Now
now
going
going
back
back
into
into
the
the
app,
app
you
you
can
can
see
see
that
that
when
when
we
we
update
update
the
the
form,
form
it
it
also
also
updates
updates
the
the
Firebase
firebase
database
database
after
after
every
every
form
form
change
change
event
event
occurs.
occurs
If
if
you
you
want
want
a
a
more
more
traditional
traditional
form
form
experience,
experience
you
you
could
could
just
just
add
add
a
a
button
button
here
here
and
and
then
then
fire
fire
the
the
update
update
function
function
whenever
whenever
the
the
user
user
clicks
clicks
that
that
button.
button
That's
that's
it
it
for
for
reactive
reactive
forms
forms
with
with
Angular
angular
4
4
and
and
Firebase.
firebase
If
if
this
this
video
video
helps
helps
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
have
have
any
any
suggestions
suggestions
or
or
if
if
you
you
wanna
wanna
support
support
the
the
channel,
channel
to
to
becoming
becoming
a
a
pro
pro
member
member
at
at
angularfirebase.com.
angularfirebase.com
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
see
see
you
you
next
next
time.
time
success
The speaker explains how to use the reactive form module in Angular's application and explains how to use it for classified ads. They also discuss the benefits of using the reactive form and how it provides better control and validation. The speaker then explains how to build a form and how to input input attributes for it. They also mention a feature to show how to update the dynamic data in the database and recommend checking the URL for more information.
Angular Reactive Forms with Firebase Database Backend
Angular's reactive form module allows you to build reliable yet complex forms throughout your application. In this episode, we're going to talk about how to use the reactive form module along with the Firebase real time database. What we're building is just a simple form for classified ads. Rather than use a traditional form submit button, we're going to update the form in the database anytime a value changes. In my opinion, this provides a better user experience and it also prevents data from being lost if the page is refreshed. So what is a reactive form? Basically, it's just a form that's been defined in the component TypeScript to give it a synchronous flow of data. This gives you better control over logic and validation as well as making testing a lot easier. The other type of form is a template driven form which uses ng model to build the form in the component HTML. The benefit is that you can create forms with less code. However, the drawback is that They're harder to maintain especially as the form grows larger and more complex. So a good rule to follow is if you're building a big complex form, you should probably go with the reactive form module. Reactive forms are kept in their own module, so we'll need to import that in whichever module we plan on using it in. In this example, we import the reactive forms module into our app module and then add it to the import section. Now we can start building the ad service that will get data from Firebase for our classified ads. I'm also going to create an ad listing class, which will populate some default data whenever we start a new ad from scratch. So our classified ads will have a title, some content, a price, and an image. From there, we can inject the AngularFire database, and then we'll create a function that will create a new ad in the database. This function will push a new ad listing to a Firebase list observable. But instead of returning that full list observable, we'll just grab the key and then return the newly created object as an object observable. You can call key after you call push and that'll return the push key from Firebase. Then you can just pass that key to another object observable query. Then we'll create another function that will just update an existing object in the database with new data. Now let's go into the component type script. We will import the add service and also form group, form builder, and validators from Angular forms. Then we'll set up a variable for add, which is just the Firebase object observable, and also add form, which will be a form group. Then we inject our ad service and the form builder in the constructor. The way our feature works is that when the user clicks the button to create a add listing. It will save some default data in the database and then allow them to edit it from there. The next step is to build the form itself. So we create a function called build form, and then we define the add form variable using the form builder group function, and we pass a bunch of attributes that have validators attached to them. These validators are based on constraint validations in JavaScript, and you can attach as many as you want to each attribute. In order to sync our data up with Firebase, we need to subscribe to the object observable, and then we'll populate this reactive form with that value by calling the patch value method on it. The only other function we need in the component is an event handler that will save the new data to Firebase anytime a form value changes. I also add a conditional statement here to see if the form is valid. And if it's not valid, we just for turn so we can't add invalid data to the database from the front end. You should also add back end database validation rules in Firebase just to make sure your data is 100% here. In the HTML, the first thing we'll do is create a preview of the ad, which just will take the various attributes and apply the async pipe as well as the attribute we wanna show. All pretty basic stuff here. There's a lot of HTML to get through here, so be sure to check out the link in the description to get the full code used in this lesson. You add reactive forms to the HTML by binding the form group to an HTML form itself. From there, you can start adding form inputs to it. And the important part here is that when you add an input, you add the form control name with the attribute that it's controlling. So in other words, this form input will control the title on our classified ad. And whenever this value changes, it will update the Firebase database. Then we use ng class to apply either a red border when the form is not valid or a green border when this form attribute is valid. We get the validity state by calling add form dot get with the attribute we want and then valid which will return either true or false. We We also wanna check for the dirty state because we don't want the form to have a bunch of red borders when it's first loaded. The end result is the toggling of red and green classes when the form value empty. We can also use this to display helpful messages to the user when a form value is invalid. In this case, if the title's missing, we'll show a message that says title is acquired. We can follow the same exact approach for every other form input and again I post the code on angularfirebase.com if you wanna check out the entire thing. Now going back into the app, you can see that when we update the form, it also updates the Firebase database after every form change event occurs. If you want a more traditional form experience, you could just add a button here and then fire the update function whenever the user clicks that button. That's it for reactive forms with Angular 4 and Firebase. If this video helps you, please like and subscribe. And if you have any suggestions or if you wanna support the channel, to becoming a pro member at angularfirebase.com. Thanks for watching, and I'll see you next time.
The speaker explains how to use the reactive form module in Angular's application and explains how to use it for classified ads. They also discuss the benefits of using the reactive form and how it provides better control and validation. The speaker then explains how to build a form and how to input input attributes for it. They also mention a feature to show how to update the dynamic data in the database and recommend checking the URL for more information.