Skip to content

Files

Latest commit

3404179 · Dec 8, 2023

History

History

10-reactive-forms

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Dec 8, 2023
Dec 5, 2023
Dec 5, 2023

10-reactive-forms

Run this example

From the command line at the root of the project:

ng serve 10-reactive-forms

Instructions

Enable Reactive Forms

  1. In app.component.ts, import ReactiveFormsModule at the file level.

  2. Next, add ReactiveFormsModule to the imports array of the AppComponent.

Define the form controls model

  1. In app.component.ts, import FormGroup and FormControl from @angular/forms.

  2. Define a property in AppComponent called blogForm and assign it to a new instance of FormGroup.

  3. Add two FormControls: title and body.

Bind the form to the template

  1. Update the form element of the template to property bind formGroup to blogForm.

  2. Next, update the form element to bind to the ngSubmit event, use the handleFormSubmit() as the value.

  3. Update input#title by adding the formControlName attribute directive and set the value to title.

  4. Update textarea#body by adding the formControlName attribute directive and set the value to body.

Implement handleFormSubmit

  1. Call the postBlog() function and pass in the title and body as parameters.

  2. Save your changes.

  3. 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.