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

Popular posts from this blog

Restaurant

TimePass

UIUXFILES