From the command line at the root of the project:
ng serve 10-reactive-forms
-
In
app.component.ts
, importReactiveFormsModule
at the file level. -
Next, add
ReactiveFormsModule
to theimports
array of theAppComponent
.
-
In
app.component.ts
, importFormGroup
andFormControl
from@angular/forms
. -
Define a property in
AppComponent
calledblogForm
and assign it to a new instance ofFormGroup
. -
Add two
FormControls
:title
andbody
.
-
Update the
form
element of the template to property bindformGroup
toblogForm
. -
Next, update the
form
element to bind to thengSubmit
event, use thehandleFormSubmit()
as the value. -
Update
input#title
by adding theformControlName
attribute directive and set the value totitle
. -
Update
textarea#body
by adding theformControlName
attribute directive and set the value tobody
.
-
Call the
postBlog()
function and pass in thetitle
andbody
as parameters. -
Save your changes.
-
Confirm that your changes have been made in the browser. Open the browser console to confirm the message that your post has been successfully posted.