I am currently trying to transfer the information inputted into a text-box field on my webpage to variables within the component file. These variables will then be utilized in the service file, which includes a function connected to the POST request I executed on the python/SQLAlchemy side. The technology stack I am using consists of Flask with python/SQLAlchemy on the backend, and Angular CLI 7.0.5. Here is an overview of what I have implemented:
<div class = "container">
<input id="InsertItemName" [(ngModel)]="InsertItemName"/>
<input id="InsertItemManu" [(ngModel)]="InsertItemManu"/>
<input id="InsertItemType" [(ngModel)]="InsertItemType"/>
<button (click)="sendValues()">Send</button>
</div>modify-page.component.html:
import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute, Data } from '@angular/router';
import { HttpResponse } from '@angular/common/http';
import { SelectItem } from 'primeng/components/common/selectitem';
import { MenuItem } from 'primeng/api';
import { ModifyService, ItemsData } from '../modify.service'
import { PARAMETERS } from '@angular/core/src/util/decorators';
@Component({
selector: 'app-modify-page',
templateUrl: './modify-page.component.html',
styleUrls: ['./modify-page.component.css']
})
export class ModifyPageComponent implements OnInit {
InsertItemName: string;
InsertItemManu: string;
InsertItemType: string;
insertItems: ItemsData;
constructor(
private modifyService: ModifyService,
private route: ActivatedRoute
) {
}
ngOnInit() {
this.insertItems.name = this.InsertItemName;
this.insertItems.manufacture = this.InsertItemManu;
this.insertItems.type = this.InsertItemType;
}
sendValues(): void {
console.log(this.InsertItemName, this.InsertItemManu, this.InsertItemType)
this.modifyService.postInputItems(this.insertItems)
}
}
modify.service.ts:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
export interface ItemsData {
name: string;
manufacture: string;
type: string;
}
@Injectable({
providedIn: 'root'
})
export class ModifyService {
constructor(
public http: HttpClient
) { }
postInputItems(data: ItemsData){
return this.http.post('/modify/insertItems', data)
}
}
If required, here is the database.py file for reference:
def insert_dbItems(a, b, c):
with engine.connect() as con:
ins = Items.insert().values(name = a, manufacture = b, type = c)
con.execute(ins)
return "Successfully inserted data into Items table"
Additionally, below is the content of the init.py file:
@app.route('/api/modify/insertItems', methods=["POST"])
def insert_Itemsdb():
body = json.loads(request.data)
a = body['name']
b = body['manufacture']
c = body['type']
return jsonify(database.insert_dbItems(a, b, c))
While the database and init files appear to be working correctly, I encountered an issue after executing all the code mentioned above, resulting in the following output:
To summarize, the main objective of implementing these functionalities is to capture user input and store it securely in the database. Any advice or assistance would be greatly appreciated! Thank you!