In this article, we will create a new product. Here we are using reactive forms for creating a new product. first of all, you need to import FormsModule and ReactiveFormsModule in the app.module.ts file. Your app.module.ts file should like the following.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {HttpClientModule} from "@angular/common/http";
import { ViewComponent } from './crud/view/view.component';
import { CreateComponent } from './crud/create/create.component';
import { UpdateComponent } from './crud/update/update.component';
import { ReadComponent } from './crud/read/read.component';
import {FormsModule, ReactiveFormsModule} from "@angular/forms";

@NgModule({
declarations: [
AppComponent,
ViewComponent,
CreateComponent,
UpdateComponent,
ReadComponent
],
imports: [
BrowserModule,
HttpClientModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Next, we have to move on create component section. Open your create.component.ts file and create the following class property.

productForm: FormGroup;

Next, inject CURD serviceRouter and FormBuilder using dependency injection on view component.

constructor(
private fb: FormBuilder,
private crudService: CrudService,
private router: Router) {
}

initialize the form controls for product create the form using form builder in to the constructor. Here, we are using the Validators for implementing the form validation.

this.productForm = this.fb.group({
name: ['', Validators.required],
desc: ['', Validators.compose([Validators.required, Validators.minLength(10), Validators.maxLength(1000)])],
price: ['', Validators.compose([Validators.required])],
});

Next, create a method for saving the product.

saveProduct(values){
const productData = new FormData();
productData.append('name', values.name);
productData.append('description', values.desc);
productData.append('price', values.price);
this.crudService.createProduct(productData).subscribe(result => {
this.router.navigate(['']);
});
}

Here, we are using form data for preparing the form value. We avoid the JSON encoding and decoding method via HTTP requests.

const productData = new FormData();
productData.append('name', values.name);
productData.append('description', values.desc);
productData.append('price', values.price);

we are accessing the create product service to save the product into the database.

this.crudService.createProduct(productData).subscribe(result => {
this.router.navigate(['']);
});

Once the product created successfully, we will redirect to the root page.

Here is the complete code of create.component.ts file

import { Component, OnInit } from '@angular/core';
import {FormGroup, FormBuilder, Validators} from "@angular/forms";
import {CrudService} from "../../services/crud.service";
import {Router} from "@angular/router";

@Component({
selector: 'app-create',
templateUrl: './create.component.html',
styleUrls: ['./create.component.scss']
})
export class CreateComponent implements OnInit {
productForm: FormGroup;
constructor(
private fb: FormBuilder,
private crudService: CrudService,
private router: Router) {
this.productForm = this.fb.group({
name: ['', Validators.required],
desc: ['', Validators.compose([Validators.required, Validators.minLength(10), Validators.maxLength(1000)])],
price: ['', Validators.compose([Validators.required])],
});
}

ngOnInit() {
}

saveProduct(values){
const productData = new FormData();
productData.append('name', values.name);
productData.append('description', values.desc);
productData.append('price', values.price);
this.crudService.createProduct(productData).subscribe(result => {
this.router.navigate(['']);
});
}
}

Next, we need to move on to the template section. Here is the complete code of the create.component.ts file

<div class="container-fluid">
<div class="row">
<div class="col-12 col-lg-12 col-md-12 sol-sm-12">
<form [formGroup]="productForm" (ngSubmit)="saveProduct(productForm.value)">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" placeholder="Enter Name" formControlName="name" required>
<div class="alert-danger" *ngIf="!productForm.controls['name'].valid && (productForm.controls['name'].touched)">
<div [hidden]="!productForm.controls['name'].errors.required">
Name is required.
</div>
</div>
</div>
<div class="form-group">
<label>Desc</label>
<input type="text" class="form-control" placeholder="Description" formControlName="desc" required>
<div class="alert-danger" *ngIf="!productForm.controls['desc'].valid && (productForm.controls['desc'].touched)">
<div [hidden]="!productForm.controls['desc'].errors.required">
Description is required.
</div>
<div [hidden]="!productForm.controls['desc'].errors.minlength">
Description must be have 10 character length.
</div>
<div [hidden]="!productForm.controls['desc'].errors.maxlength">
Description must be have 1000 character length.
</div>
</div>
</div>
<div class="form-group">
<label>Price</label>
<input type="number" class="form-control" placeholder="price" formControlName="price" required>
<div class="alert-danger" *ngIf="!productForm.controls['price'].valid && (productForm.controls['price'].touched)">
<div [hidden]="!productForm.controls['price'].errors.required">
Price is required.
</div>
</div>
</div>
<button type="submit" class="btn btn-primary" [disabled]="!productForm.valid">Submit</button>
</form>
</div>
</div>
</div>

Declare the form group name and submit function on form tag

<form [formGroup]="productForm" (ngSubmit)="saveProduct(productForm.value)">

Configure the form controls on input tags

<input type="text" class="form-control" placeholder="Enter Name" formControlName="name" required>

the following form validation block controls the form fields validation.

<div class="alert-danger" *ngIf="!productForm.controls['name'].valid && (productForm.controls['name'].touched)">
<div [hidden]="!productForm.controls['name'].errors.required">
Name is required.
</div>
</div>

Here i am using required validation. So, I validate that one. If this form control not valid then it will shows the error message.

do the same things on other input fields.