I have a search page on my Angular application. It search for properties (house, apartments ect). The user selects their criteria through a form, this form triggers a function in my component, which hits an endpoint from my API via a service.
The data is saved in my component, and currently I'm logging it to the console.
What would be the best way to display the results on the page.
This is the search page html.
<div class="container mt-4">
<div class="card">
<form [formGroup]="searchForm" (ngSubmit)="search()">
<div class="card-header">Search for a Property</div>
<div class="card-body">
<!-- County and Town Label-->
<div class="row">
<div class="col-md-6">
<label class="ml-1" for="county">County</label>
</div>
<div class="col-md-6">
<label for="town">Town</label>
</div>
</div>
<div class="row">
<!-- County Column -->
<div class="col-md-6">
<select class ="form-control" id="county" formControlName="county" >
<option *ngFor="let county of counties" [value]="county.value">
{{county.display}}
</option>
</select>
</div>
<div class="col-md-6">
<select class="form-control" formControlName="town">
<option *ngFor="let town of towns" [value]="town.value">
{{town.display}}
</option>
</select>
</div>
</div>
<!-- Bed and Bath Label-->
<div class="row mt-md-4">
<div class="col-md-3">
<label class="ml-1" for="min-bedrooms">Min Bed</label>
</div>
<div class="col-md-3">
<label for="max-bedrooms">Max Bed</label>
</div>
<div class="col-md-3">
<label class="ml-1" for="min-bathrooms">Min Bath</label>
</div>
<div class="col-md-3">
<label for="max-bathrooms">Max Bath</label>
</div>
</div>
<div class="row">
<div class="col-md-3">
<select class="form-control" formControlName="min_bedrooms">
<option *ngFor="let room of rooms" [value]="room.value">
{{room.display}}
</option>
</select>
</div>
<div class="col-md-3">
<select class="form-control" formControlName="max_bedrooms">
<option *ngFor="let room of rooms" [value]="room.value">
{{room.display}}
</option>
</select>
</div>
<div class="col-md-3">
<select class="form-control" formControlName="min_bathrooms">
<option *ngFor="let room of rooms" [value]="room.value">
{{room.display}}
</option>
</select>
</div>
<div class="col-md-3">
<select class="form-control" formControlName="min_bathrooms">
<option *ngFor="let room of rooms" [value]="room.value">
{{room.display}}
</option>
</select>
</div>
</div>
<div class="row mt-md-4">
<div class="col-md-3">
<label class="ml-1" for="min-rent">Min Price</label>
</div>
<div class="col-md-3">
<label for="max-rent">Max Price</label>
</div>
<div class="col-md-3">
<label class="ml-1" for="type">Selling Type</label>
</div>
<div class="col-md-3">
<label class="ml-1" for="type">Property Type</label>
</div>
</div>
<div class="row">
<div class="col-md-3">
<select class="form-control" formControlName="min_price">
<option *ngFor="let price of prices" [value]="price.value">
{{price.display}}
</option>
</select>
</div>
<div class="col-md-3">
<select class="form-control" formControlName="max_price">
<option *ngFor="let price of prices" [value]="price.value">
{{price.display}}
</option>
</select>
</div>
<div class="col-md-3">
<select class="form-control" formControlName="selling_type">
<option *ngFor="let type of sellingTypes" [value]="type.value">
{{type.display}}
</option>
</select>
</div>
<div class="col-md-3">
<select class="form-control" formControlName="property_type">
<option *ngFor="let type of propertytypes" [value]="type.value">
{{type.display}}
</option>
</select>
</div>
</div>
<div class="row mt-md-4">
<div class="col-md-4">
<button type="submit" class="form-control btn btn-primary">
Search
</button>
</div>
</div>
</div>
</form>
</div>
</div>
This is the component linked to the HTML
export class PropertySearchComponent implements OnInit {
searchForm: FormGroup;
searchParams: any = {};
property: Property;
constructor(private advertService: AdvertService, private alertify: AlertifyService, private formBuilder: FormBuilder) { }
ngOnInit() {
this.createSearchForm();
}
createSearchForm() {
this.searchForm = this.formBuilder.group({
county: ['', Validators.nullValidator],
town: ['', Validators.nullValidator],
min_bedrooms: ['', Validators.nullValidator],
max_bedrooms: ['', Validators.nullValidator],
min_bathrooms: ['', Validators.nullValidator],
max_bathrooms: ['', Validators.nullValidator],
min_price: ['', Validators.nullValidator],
max_price: ['', Validators.nullValidator],
selling_type: ['', Validators.nullValidator],
property_type: ['', Validators.nullValidator],
});
}
search() {
this.searchParams.county = (Object.assign({}, this.searchForm.value));
this.advertService.propertySearch(this.searchParams).subscribe(data => {
this.property = data;
console.log(this.property);
}, error => {
console.log(error);
});
}
In the search() function above the property search results are saved in this.property.
This is the function in my service that is called from the component.
propertySearch(model: any): Observable<Property> {
return this.http.post<Property>(environment.apiUrl + 'search', model);
}
How should I go about displaying the results saved in this.property.
You need add a table with contain your fields.
And display like this, i assume your property variable has these id, name, email, website.
<table class="table table-striped">
<thead>
<tr>
<th style="width: 20%">
ID
</th>
<th style="width: 50%">
Name
</th>
<th style="width: 10%">
Email
</th>
<th style="width: 20%">
Website
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of property">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.email}}</td>
<td>{{item.website}}</td>
</tr>
</tbody>
</table>
Related
I have an angular application in that I have to show the dropdown list based on the picklist values.
.service.ts
public getLists() {
let baseUrl = `/endpoint`;
this._restfulService
.restfulGetData(baseUrl)
.subscribe(
(LookupData: LookupData) => {
if (LookupData) {
this.option1data = LookupData.option1Data;
this.option2data = LookupData.option2Data;
this.option3data = LookupData.option3Data;
this.option4data = LookupData.option4Data;
}
},
(err) => {
console.error(err);
}
);
}
.component.html
<div class="row">
<div class="form-group">
<div class="col-sm-3">
<label for="action"> <b>Category</b></label>
</div>
<div class="col-sm-7">
<select>
<option value="" disabled [selected]="true"></option>
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
</select>
</div>
</div>
</div>
<div class="row>
<div class="form-group">
<div class="col-sm-3>
<label for="action"> <b>Lists</b></label>
</div>
<div class="col-sm-7">
<select>
<option value="" disabled [selected]="true"></option>
<option>
//In this dropdown I have to show the lists based on the selection of picklists
</option>
</select>
</div>
</div>
</div>
So In tha above code if I select option1 from the picklist I have to show the option1Data dropdownlist etc..
can anyone helpme on this
<div class="row">
<div class="form-group">
<div class="col-sm-3">
<label for="action"> <b>Lists</b></label>
</div>
<div class="col-sm-7">
<select>
<option disabled selected="true">Select pick</option>
<option *ngFor="let items of LookupData" [ngValue]="items.name">
{{ items.name }}
</option>
</select>
</div>
</div>
</div>
please put the above code in the HTML file. Hope this code will helpful to you
I managed to dynamically add input fields using this code :
My HTML :
<div class="row">
<div class="col-12">
<div class="card mb-4 form_field_outer ">
<div class="card-body form_field_outer_row ">
<form>
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputState">Casting</label>
<select id="id_casting" class="form-control" name="id_casting">
<option selected>Choose...</option>
#foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
#endforeach
</select>
</div>
<div class="form-group col-md-4">
<label for="inputState">Type de contrat</label>
<select id="id_modele_contrat" class="form-control" name="id_modele_contrat">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
My script :
$(document).ready(function(){
$("body").on("click",".add_new_frm_field_btn", function (){
console.log("clicked");
var index = $(".form_field_outer").find(".form_field_outer_row").length + 1;
$(".form_field_outer").append(
`
<div class="col-12">
<div class="card-body form_field_outer_row">
<div class="form-row">
<div class="form-group col-md-4">
<label for="inputState">Casting</label>
<select id="id_casting" class="form-control" name="id_casting">
<option selected>Choose...</option>
#foreach($castings as $casting)
<option data-id="{{$casting->id_casting}}" value="{{$casting->id_casting}}">{{$casting->nom.' '.$casting->prenom}}</option>
#endforeach
</select>
</div>
<div class="form-group col-md-4">
<label for="inputState">Type de contrat</label>
<select id="id_modele_contrat" class="form-control" name="id_modele_contrat">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="card-body ">
<button type="button" class="btn btn-outline-warning mb-1 remove_node_btn_frm_field">Delete</button>
</div>
</div>
</div>
</div>
`);
$(".form_field_outer").find(".remove_node_btn_frm_field:not(:first)").prop("disabled", false);
$(".form_field_outer").find(".remove_node_btn_frm_field").first().prop("disabled", true);
});
});
No, I'm trying to get the id_casting of each selected item in selecbox for each added rows
So I tried the following scipt :
<script type="text/javascript">
$(document).ready(function(){
$("#id_casting").change(function(){
console.log("clickk");
let id_casting = $(this).find("option:selected").data("id");
console.log(id_casting);
});
});
/* });*/
</script>
Bu this script get only the id_casting of the first row and when I add a new row and I select item from select-box it doesn't get the id_casting of the selected item of select-box added
dynamically.
I am getting this error:
ERROR TypeError: Cannot read property 'invalid' of undefined
And it is pointing here: https://imgur.com/TlvObGk
I did some tweaking such as commenting out the options and it pointed to
the select element itemBrand:
<select id="itemBrand" name="itemBrand" formControlName="itemBrand" class="form-control btn-sm brand" (change)="changeBrand($event)" required>
So I am thinking that the formControl validator is having an issue with my select element. But I cannot fix it.
Here is the initialization of the form using form builder:
typescript:
ngOnInit() {
this.getBrands();
this.itemAddForm = this.fb.group({
itemName: ['', Validators.required],
itemBrand: ['Select a Brand', Validators.required],
// ....
});
}
html:
<form class="form-horizontal" [formGroup]="itemAddForm" (ngSubmit)="onSubmit()">
<fieldset>
<div class="form-group">
<label class="col-md-3 control-label" for="itemName">Item Name</label>
<div class="col-md-6">
<input id="itemName" name="itemName" formControlName="itemName" class="form-control input-md" required
type="text">
</div>
<div *ngIf="itemAddForm.get('itemName').errors && itemAddForm.get('itemName').touched">
<p class="error-message text-danger"><span class="error-icon text-danger">!
</span>{{itemAddForm.get('itemName').errors.msg || 'Please enter an item name.'}}</p>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="itemBrand">Brand</label>
<div class="col-md-6">
<div class="input-group mb-3">
<select id="itemBrand" name="itemBrand" formControlName="itemBrand"
class="form-control btn-sm brand" (change)="changeBrand($event)" required>
<!-- <option [value]="" disabled>Select a brand</option> -->
<option *ngFor="let brand of brands" [value]="brand?.brand">{{ brand?.brand }}</option>
</select>
<div *ngIf="itemBrand.invalid">
Select a brand.
</div>
</div>
</div>
</fieldset>
</form>
Try *ngIf="itemBrand?.invalid" instead of *ngIf="itemBrand.invalid" for a safe condition check.
I have a form with many select options. I need to populate these. Initially via JSON, but later I will populate from my database.
How do I go about this.
This will be my html.
<div class="container mt-4">
<div class="card">
<form>
<div class="card-header">Search for a Property</div>
<div class="card-body">
<!-- County and Town Label-->
<div class="row">
<div class="col-md-6">
<label class="ml-1" for="county">County</label>
</div>
<div class="col-md-6">
<label for="town">Town</label>
</div>
</div>
<div class="row">
<!-- County Column -->
<div class="col-md-6">
<select class ="form-control" id="county" name="county">
</select>
</div>
<div class="col-md-6">
<select class="form-control" name="town">
</select>
</div>
</div>
</div>
</form>
</div>
</div>
This will be my js.
Is there a way to just populate arrays for each select I need and loop through each item.
export class PropertySearchComponent implements OnInit {
searchForm: FormGroup;
constructor(private advertService: AdvertService, private alertify: AlertifyService, private formBuilder: FormBuilder) { }
ngOnInit() {
this.createSearchForm();
}
createSearchForm() {
this.searchForm = this.formBuilder.group({
town: [, Validators.required],
county: [, Validators.required],
});
}
}
You need to populate some arrays in your .ts file (I'm assuming you're using TypeScript) such as this one:
counties: string[] = ['County1', 'County2', 'County3'];
Then in the template file:
<select class ="form-control" id="county" name="county">
<option value="">Please select a county</option>
<option *ngFor="let county of counties"
[value]="county">{{county}}
</option>
</select>
Angular just needs to know what to loop through and have a reference to it in your template. This is an excellent reference: https://codecraft.tv/courses/angular/forms/model-driven/
i m using bootstrap selectpicker. it is working fine on page load but on dropdown change it gives the error that selectpicker is not a function.
Initialization
$(document).ready(function()
{
$(".selectpicker").selectpicker();
}
Html
<div class="row">
<div class="col-lg-6 col-sm-6 col-xs-12">
<div class="form-group success">
<label for="title"> Country <span class="asterisk">*</span> </label>
<select data-size="5" onchange="changeCountry(this.value)" class="form-control selectpicker bs-select-hidden" name="Tours[countryid]" id="Tours_countryid">
<option value="">---Select Country---</option>
</select>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-xs-12">
<div class="form-group">
<label for="widgettitle"> State <span class="asterisk">*</span> </label>
<select id="Tours_stateid" name="Tours[stateid]" data-size="5" class="form-control selectpicker bs-select-hidden" maxlength="50">
<option value="">---Select State---</option>
</select>
</div>
</div>
</div>
javascript onchange function
function changeCountry(value)
{
$.ajax({
url: "<?php echo Yii::app()->createurl('/site/changecountry') ?>",
type: 'post',
data: {id: value},
success: function (result) {
$("#Tours_stateid").html(result)
$('.selectpicker').selectpicker('refresh');
}
});
}
There is a dropdown dependencies i.e. when we change country then of bases on country, state list will be display
It seems working fine. Its just you have not closed the select element.
<div class="row">
<div class="col-lg-6 col-sm-6 col-xs-12">
<div class="form-group success">
<label for="title"> Country <span class="asterisk">*</span> </label>
<select data-size="5" class="form-control selectpicker bs-select-hidden" name="Tours[countryid]" id="Tours_countryid">
<option value="">---Select Country---</option><option value="1">Country1</option><option value="2">Country2</option>
</select>
</div>
</div>
<div class="col-lg-6 col-sm-6 col-xs-12">
<div class="form-group">
<label for="widgettitle"> State <span class="asterisk">*</span> </label>
<select id="Tours_stateid" name="Tours[stateid]" data-size="5" class="form-control selectpicker bs-select-hidden" maxlength="50">
<option value="">---Select State---</option>
</select> </div>
</div>
</div>
In js file (using jQuery change event to call local function)
$(document).ready(function(){
$('#Tours_countryid').on('change', function() {
changeCountry(this.value);
});
function changeCountry(value) {
console.log(value);
}
});
Hope it helps