I am running JHipster "6.7.1" for this app.
I have a one-to-many entity relationship:
An employee can have many cars.
Each car has only one employee.
Car owns the relationship: I go to the car page and decide which employee owns it.
relationship OneToMany {
Employee{car} to Car{Employee(name)},
}
The page generates with a drop-down of employees:
<div class="form-group">
<label class="form-control-label" jhiTranslate="myApp.car.employee" for="field_employee">employee</label>
<select class="form-control" id="field_employee" name="employee" formControlName="employee">
<option [ngValue]="null"></option>
<option [ngValue]="employeeOption.id === editForm.get('employee')!.value?.id ? editForm.get('employee')!.value : employeeOption" *ngFor="let employeeOption of employees; trackBy: trackById">{{ employeeOption.name }}</option>
</select>
</div>
But there can be thousands of employees, so the default drop-down isn't good. A type-ahead component would be good, or even a look up pop-up dialog, but right now I want something much simpler: just enter the ID of the employee. The user can use the employee page to find the ID of the employee and type it in.
I tried replacing the select with a text box to take and display the ID only, but this ended up showing [object Object]
<input type="text" class="form-control" name="client" id="field_client" formControlName="client"
value="editForm.get('client')!.value?.id"/>
Related
I have a user update form that I'm working on. The user can pick an option from a select menu, and that option gets saved to the db as a string.
<select name="morality" id="morality">
<option value="">Choose down below!</option>
<option value="Good"> Good</option>
<option value="Neutral">Neutral</option>
<option value="Evil">Evil</option>
</select>
When the user picks an option, I'm able to post to the database. When I reload the page, I'd like to get the chosen value and use it to add a selected attribute to the corresponding option. So if a person picks Neutral and saves it, I'd like to show...
<select name="morality" id="morality">
<option value="">Choose down below!</option>
<option value="Good"> Good</option>
<option value="Neutral" selected >Neutral</option>
<option value="Evil">Evil</option>
</select>
you have to pass value morality to view when rendering page :
router.get('/edit/:id', function(req, res) {
Model.findOne({_id:req.params.id},function(err,data){
if(!err && data){
res.render('home',{morality:data.morality});
// or you can pass whole data object to view
//res.render('home',{data:data});
// inside view {{data.morality}}
}
});
});
and in view add condition like this :
<select name="morality" id="morality">
<option value="" {{morality==''?'selected':''}}>Choose down below!</option>
<option value="Good" {{morality=='Good'?'selected':''}}> Good</option>
<option value="Neutral" {{morality=='Neutral'?'selected':''}}>Neutral</option>
<option value="Evil" {{morality=='Evil'?'selected':''}}>Evil</option>
</select>
I'm trying to filter my products by categoryId value.
Products are listing in product-component.
I have a categoryFilter pipe that filters Products and returns list of Product.
This pipe requires categoryId but this value is in category-component scope. So my product-component cannot access it. What should I do to make it work?
product-component.html
<ul class="list-group">
<li class="list-group-item" *ngFor="let product of products |productFilter:filterText|categoryFilter:filterCategory">
<button (click)="addToCart(product)" class="btn btn-sm btn-primary float-right">
<i class="fa fa-plus"></i>
add to cart
</button>
<h5>{{product.productName | uppercase}} ({{product.categoryId}})</h5>
<p>{{product.quantityPerUnit}}</p>
<h6>{{product.unitPrice | currency:'TRY':'₺'}} (KDV DAHİL: {{product.unitPrice |vatAdded:8 | currency:'TRY':'₺'}})</h6>
</li>
category-component.html
<select class="form-control" [(ngModel)]="filterCategory">
<option value="" selected="selected">-- Choose Category --</option>
<option *ngFor="let category of categoryList" value="
{{category.categoryId}}">{{category.categoryName}}</option>
</select>
category-filter.pipe.ts
import { Pipe, PipeTransform } from '#angular/core';
import { Product } from '../product/product';
#Pipe({
name: 'categoryFilter'
})
export class CategoryFilterPipe implements PipeTransform {
transform(value: Product[], filterCategory?: any): Product[] {
return filterCategory?
value.filter((p:Product)=>p.categoryId==filterCategory):value;
}
}
You may share data between two components that cannot communicate via Events by using services.
You can inject a service in the two components and access the required field from there. Changing the value of service's field will reflect in both the components.
Please take a look at the below demo to get some sort of idea on how to implement.
https://stackblitz.com/edit/angular-prge5p?file=src%2Fapp%2Fproduct.component.ts
Change the value of appService.category from category-component and it will automatically reflect in the product-component.
#GetMapping("add")
public String addPart(Model model)
{
model.addAttribute("suppliers", this.partService.getSupplierNames());
model.addAttribute("part", new AddPartViewModel());
return "parts/parts-add";
}
This is my class
public class AddPartViewModel
{
private String name;
private double price;
private int quantity;
private String supplierName;
//PUBLIC GETERS AND SETTERS AND AN EMPTY CONSTRUCTOR
}
Thymeleaf syntax
<div class="form-group">
<label for="supplierName">Example select</label>
<select class="form-control" id="supplierName">
<option th:each="name : ${suppliers}" th:text="${name}" th:field="*{supplierName}"></option>
</select>
</div>
This is the only place where i get error on. The rest of the fragment works correctly, even if just remove the th:field tag the List<String> suppliers parces it self correctly in to the select box. Not i tried to put the th:field in the <select> tag as well, i.e
<select class="form-control" id="supplierName" th:field="*{supplierName}">
but still i get an error during parcing
th:field reffers to a form-backing bean's field, so make sure you've provided the proper bean in a <form> tag (using th:object attribute).
Regarding select: th:field should be provided in a <select> tag, like you've attempted to do. But you should provide also the proper th:value attribute in a <option> tag, so that any value could be assigned to the field.
Your form containing the problematic select should look like this:
<form th:object="${part}">
<div class="form-group">
<label for="supplierName">Example select</label>
<select class="form-control" th:field="*{supplierName}">
<option th:each="name : ${suppliers}" th:value="${name}" th:text="${name}"></option>
</select>
</div>
<!-- the rest of form's inputs and buttons -->
</form>
I'm using Express.js and trying to get form data of a dropdown select element,
I tried with body-parser but what I get with eq.body.method_select is undefined.
I didn't find much info about how to do this on the web.
Here is my code html code:
<form action="url_analyse">
<div class="col-lg-6">
<div class="input-group">
<select class="custom-select mb-2 mr-sm-2 mb-sm-0" name="method_select" id="inlineFormCustomSelect">
<option value="5">Regular Search (Short)</option>
<option value="10">Intense Search (Long)</option>
<option value="20">Deep Search (Very Long)</option>
</select>
<input type="text" name="url_input" class="form-control" placeholder="Enter URL">
<span class="input-group-btn">
<button class="btn btn-secondary">Go!</button>
</span>
</div>
</div>
Here is my js code:
app.get('/url_analyse', function(req, res) {
console.log(req.body.method_select);
})
Hope you can help me with that.
Thank you.
There are two issues here:
You might want to explicitly add the leading forward slash: action="/url_analyse"
The default form submission HTTP method is GET, which means that form fields will be passed in the query string portion of the URL. This means you will instead need to access req.query to get at the form fields. You only need body-parser and req.body when you use POST and other methods (with the appropriate enctype) to submit your form.
To put this briefly I am testing a Google drive form that will record votes for a school election to ensure that it is secure.
Is there a way to open a form from the shared URL and list/input data? In short, can I write a script to act like a bot that will vote and try to crash the form?
Sample URL: http://docs.google.com/forms/d/RANDOM_STRING/viewform
Edit: Some time around the end of 2014 a change in the Google Forms service invalidated this hack. Look at Is it possible to 'prefill' a google form using data from a google spreadsheet? and How to prefill Google form checkboxes? for a solution that relies on the Form methods.
A Google Form, when shown as a "live form", is just an HTML Form, with all the regular behaviors of a form. You can view the HTML source of a live form, and get the information that will help you simulate POST requests.
HTML Form
For example, look at the form from Spreadsheet Email Trigger. Here is the form HTML, cleaned up for readability:
<form action="https://docs.google.com/spreadsheet/formResponse?formkey=#FORMKEY#&ifq"
method="POST" id="ss-form">
<br>
<label class="ss-q-title" for="entry_0">First Name
<span class="ss-required-asterisk">*</span>
</label>
<label class="ss-q-help" for="entry_0"></label>
<input type="text" name="entry.0.single" value="" class="ss-q-short" id="entry_0">
<br>
<label class="ss-q-title" for="entry_1">No of User
<span class="ss-required-asterisk">*</span>
</label>
<label class="ss-q-help" for="entry_1"></label>
<select name="entry.1.single" id="entry_1">
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
<br>
<label class="ss-q-title" for="entry_2">Email ID
<span class="ss-required-asterisk">*</span>
</label>
<label class="ss-q-help" for="entry_2"></label>
<input type="text" name="entry.2.single" value="" class="ss-q-short" id="entry_2">
<br>
<input type="hidden" name="pageNumber" value="0">
<input type="hidden" name="backupCache" value="">
<input type="submit" name="submit" value="Submit">
<div class="password-warning">Never submit passwords through Google Forms.</div>
</form>
Important elements are marked in this screenshot:
Script to simulate a Google Form submission
Armed with the action URL and field names, we can code a function to programmatically submit a form, by modifying the example from the UrlFetch documentation:
// Simulate POST to form
function sendHttpPost() {
// Copy the entire URL from <form action>
var formAction = "https://docs.google.com/spreadsheet/formResponse?formkey=#FORMKEY#&ifq";
var payload = {
"entry.0.single": "Nelson", // First Name
"entry.1.single": "10", // No of users
"entry.2.single": "user#example.com" // Email ID
};
// Because payload is a JavaScript object, it will be interpreted as
// an HTML form. (We do not need to specify contentType; it will
// automatically default to either 'application/x-www-form-urlencoded'
// or 'multipart/form-data')
var options = {
"method": "post",
"payload": payload
};
var response = UrlFetchApp.fetch(formAction, options);
}
Result
Here's the result of the above script, a form response has been added to the spreadsheet.