When running this code, I expected my form to display in the browser. However, I encountered an error:
Error: src/app/addproducts/addproducts.component.html:18:48 - error TS2339: Property 'price' does not exist on type 'ADDPRODUCTSComponent'.
18 <input type="text" id="price" [(ngModel)]="price" #client="ngModel" name="price" placeholder="Enter Price..">
~~~~~
src/app/addproducts/addproducts.component.ts:7:16
7 templateUrl: './addproducts.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component ADDPRODUCTSComponent.
Error: src/app/addproducts/addproducts.component.html:18:48 - error TS2339: Property 'price' does not exist on type 'ADDPRODUCTSComponent'.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component ADDPRODUCTSComponent.
user.ts
export class User{
constructor(
name:string,
price:number
){}
}
addproducts.component.html
<!DOCTYPE html>
<html>
<body>
<h3>Using CSS to style an HTML Form</h3>
<div style="text-align: center">
<h1>{{message}}</h1>
</div>
<div>
<form action="/action_page.php">
<label for="name">First Name</label>
<input type="text" id="name" [(ngModel)]="user.name" #client="ngModel" name="name" placeholder="Your Product name..">
<label for="price">Price</label>
<input type="text" id="price" [(ngModel)]="user.price" #client="ngModel" name="price" placeholder="Enter Price..">
<input type="submit" value="Submit" (click)="registerNow()">
</form>
</div>
</body>
</html>
addproducts.component.ts
import { Component, OnInit } from '@angular/core';
import { ProductDetailsService } from '../product-details.service';
import {User} from '../user';
@Component({
selector: 'app-addproducts',
templateUrl: './addproducts.component.html',
styleUrls: ['./addproducts.component.css']
})
export class ADDPRODUCTSComponent implements OnInit {
user:User = new User("",0);
message:any;
constructor(private serivce:ProductDetailsService ) { }
ngOnInit(): void {
}
public registerNow(){
let res=this.serivce.doRegistration(this.user)
res.subscribe((data)=>this.message=data)
}
}
app-routing.modules.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ADDPRODUCTSComponent } from './addproducts/addproducts.component';
import { OperationComponent } from './operation/operation.component';
const routes: Routes = [
{path:"",redirectTo:"register",pathMatch:"full"},
{path:"register",component:ADDPRODUCTSComponent},
{path:"operation", component:OperationComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
product-details.service.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class ProductDetailsService {
constructor(private http:HttpClient) { }
public doRegistration(user){
return this.http.post("http://localhost:8084/add",user,{responseType:'text' as 'json'})
}
}