Having finished the product details and with routing now in place, let's use Angular's rich support for forms as you go on to implement ProductEditPageComponent.

Angular's team understands that most apps require some level of handling forms, including the following:

• Two-way binding of HTML form elements 
• Field-specific and form-wide validation
• Validation monitoring and user feedback
• Form editing trackability (for example, to determine which fields are pristine, touched, and valid)
• Binding update trigger modes (blur, change, submit, and so on)

Angular provides two key alternatives when handling forms: Reactive-style and template-driven.

The former is generally preferred in the case of nontrivial and somewhat complicated forms, while the latter is usually preferred in simple and static forms.

While there are technical differences between the two, this chapter focuses on using template-driven forms.

First, let's implement the ProductEditPageComponent by adding all the necessary form elements and loading the categories list that the user should choose from. To do this, follow these steps:

1. Generate ProductFormComponent with the following command:

ng generate component modules/market/product-form

2. Replace the HTML file /src/app/modules/market/product-form/product-form.component.html contents with the following:

<form>
  <div>
    <label for="title">Title</label>
    <input id="title" name="title" />
  </div>
  <div>
    <label for="description">Description</label>
    <textarea id="description" name="description"></textarea>
  </div>
  <div>
    <label for="category">Category</label>
    <select id="category" name="category">
      <option value=''>Select category..</option>
      <option *ngFor="let c of categories" [value]="c.name">{{ 
       c.name }}</option>
    </select>
  </div>
  <div class="actions-panel">
    <button>Save</button>
    <button>Cancel</button>
  </div>
</form>

3. Replace the CSS file /src/app/modules/market/product-form/product-form.component.css contents with the following:

form {
  padding: 20px;
  display: flex;
  flex-direction: column;
  width: 350px;
}
 
form > div {
  padding: 5px;
}
 
input, select, textarea {
  width: 100%;
}
 
textarea {
  height: 80px;
}
 
.actions-panel {
  margin-top: 10px;
  align-self: center;
}
 
.actions-panel > button:first-child {
  margin: 5px;
}

4. Edit file /src/app/modules/market/product-form/product-form.component.ts and set categories to be received as an input:

import { Component, Input } from '@angular/core';
import { Category } from '../../../model';
 
@Component({
  selector: 'app-product-form',
  templateUrl: './product-form.component.html',
  styleUrls: ['./product-form.component.css']
})
export class ProductFormComponent {
  @Input() categories: Category[];
}

5. Edit ProductEditPage template file  /src/app/modules/market/product-edit-page/product-edit-page.component.html and render ProductFormComponent as follows:

<div *ngIf="categories">
  <app-product-form [categories]="categories"></app-product-form>
</div>
 
<app-busy *ngIf="isBusy"></app-busy>

6. Edit ProductEditPage component file /src/app/modules/market/product-edit-page/product-edit-page.component.ts and set categories to load while maintaining a busy indication state as follows:

import { Component, OnInit } from '@angular/core';
import { CategoriesService } from '../../core/services/categories.service';
import { Category } from '../../../model';
 
@Component({
 selector: 'app-product-edit-page',
 templateUrl: './product-edit-page.component.html',
 styleUrls: ['./product-edit-page.component.css']
})
export class ProductEditPageComponent implements OnInit {
 categories: Category[];
 isBusy = false;
 
 constructor(
 private readonly categoriesService: CategoriesService,
 ) { }
 
 ngOnInit() {
 this.isBusy = true;
 try {
 this.categoriesService.loadCategories()
 .then(o => this.categories = o);
 } finally {
 this.isBusy = false;
 }
 }
}

You can now run the app and click on the plus button that navigates to the editing page. It should look similar to the following:

As you can see, the form is in place and currently consists of a standard HTML form.

Next, let's use Angular's template-driven forms to bind the form elements to the component state.

First, you need to import Angular's template-driven module, named FormsModule, into MarketModule as follows:

...
import { FormsModule } from '@angular/forms';
...
 
@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    FormsModule,
    RouterModule.forChild(routes),
  ],
  ...
})
export class MarketModule { }