Menu form
Html code
<h2>Add New Menu Item</h2>
<form (ngSubmit)="submitForm()">
<label>Menu ID:</label><br>
<input [(ngModel)]="newItem.menuId" name="menuId" required><br><br>
<label>Name:</label><br>
<input [(ngModel)]="newItem.menuName" name="menuName" required><br><br>
<label>Description:</label><br>
<input [(ngModel)]="newItem.description" name="description"><br><br>
<label>Category:</label><br>
<input [(ngModel)]="newItem.category" name="category" required><br><br>
<label>Type:</label><br>
<input [(ngModel)]="newItem.type" name="type" required><br><br>
<label>Cost:</label><br>
<input type="number" [(ngModel)]="newItem.cost" name="cost" required><br><br>
<label>Status:</label><br>
<input [(ngModel)]="newItem.status" name="status" required><br><br>
<button type="submit">Add Item</button>
</form>
Ts file
import { Component } from '@angular/core';
import { MenuService, MenuItem } from '../menu.service';
@Component({
selector: 'app-menu-form',
templateUrl: './menu-form.component.html'
})
export class MenuFormComponent {
newItem: MenuItem = {
menuId: '',
menuName: '',
description: '',
category: '',
type: '',
cost: 0,
status: ''
};
constructor(private menuService: MenuService) {}
submitForm(): void {
if (!this.newItem.menuId || !this.newItem.menuName) {
alert('Menu ID and Name are required.');
return;
}
this.menuService.create(this.newItem).subscribe(() => {
alert('Item added successfully!');
this.newItem = {
menuId: '',
menuName: '',
description: '',
category: '',
type: '',
cost: 0,
status: ''
};
});
}
}
App.module.ts
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
...,
FormsModule
]
})
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // ← ADD THIS
import { HttpClientModule } from '@angular/common/http'; // ← For backend communication
import { AppComponent } from './app.component';
import { MenuFormComponent } from './menu-form/menu-form.component'; // ← Import your component
import { MenuService } from './menu.service'; // ← Import service
@NgModule({
declarations: [
AppComponent,
MenuFormComponent // ← Declare the component here
],
imports: [
BrowserModule,
FormsModule, // ← Required for ngModel
HttpClientModule // ← Required for API calls
],
providers: [MenuService], // ← Provide service here
bootstrap: [AppComponent]
})
export class AppModule { }
Comments
Post a Comment