for getCities(), i am fetching data from api,
which i just showed in li tag, i am in deliama how to submit the check box value,
when customer will check for multiple cities
<form #hlForm="ngForm" (ngSubmit)="filterData(hlForm)">
<span>
<button type="submit" class="btn-blue" (click)="getCities()">Select City</button>
<ul class="location-filter" *ngIf="cityList">
<li *ngFor="let city of cityList">
{{city}} <input type="checkbox" name="selectCity">
</li>
</ul>
</span>
<button type="submit" value="submit">submit</button>
</form>
When using template driven forms, add NgModel to the element attributes.
You should also add a unique name to each li element to be able to differentiate between values:
<li *ngFor="let city of cityList">
{{city.name}} <input type="checkbox" [name]="city.name" ngModel>
</li>
Stackblitz demo
You need to have an array where you can store all your selected cities, and update this array each time a checkbox for a city is checked/unchecked.
Change your code to:
<form #hlForm="ngForm" (ngSubmit)="filterData(hlForm)">
<span>
<button type="submit" class="btn-blue" (click)="getCities()">Select City</button>
<ul class="location-filter" *ngIf="cityList">
<li *ngFor="let city of cityList">
{{city}} <input value={{city}} (change)="onCheckChange($event)" type="checkbox" name="selectCity">
</li>
</ul>
</span>
<button type="submit" value="submit">submit</button>
</form>
And your onCheckChange method would look like this:
onCheckChange(event: any)
{
console.log(event.target.value)
if (event.target.checked)
{
this.selectedCities.push(event.target.value);
}
else
{
this.selectedCities = this.selectedCities.filter(x => x !== event.target.value);
}
}
Take a look at this Stackblitz illustrating this.
You can reference DOM element by using the # selector and viewchild.
In your .ts you can get the element like this:
#ViewChild('yourSelector') anyName: Input
and then call any function that exists on the element. and in your .html you use the # selector:
<input #yourSelector type="checkbox"....
Related
I have two radio buttons on my HTML page for gender selection (M or F).
How to retrieve which button was clicked in my typescript file? Here's the code
<form>
<label> Gender </label>
<br>
<input type="radio" required name='gender' value='Male' [(ngModel)]='gender'>Male
<br>
<input type="radio" required name='gender' value='Female' [(ngModel)]='gender'>Female
<br>
<button id="signup" class="btn btn-primary" type="submit">Signup</button>
</form>
On clicking the button, I want to assign M or F to a string in my typescript file.
You code is correct. No need to change anything.
This is your template code.
<form (ngSubmit)="onSubmit()">
<label>Gender</label>
<input type="radio" required name='gender' value='Male' [(ngModel)]='gender'>Male
<input type="radio" required name='gender' value='Female' [(ngModel)]='gender'>Female
<button id="signup" type="submit">Signup</button>
</form>
In your .ts file,
export class TestComponent implements OnInit {
gender: string = "Male";
onSubmit() {
console.log(gender);
}
}
This will give you the selected gender value.
Because you have used two way binding. It updates the ngModel whenever the input changes.
you can retrieve which button click by add ngModelChange method
<label> Gender </label>
<br>
<input type="radio" required name='gender' value='Male' [(ngModel)]='gender' (ngModelChange)="youMethodName(gender)">Male
<br>
<input type="radio" required name='gender' value='Female' [(ngModel)]='gender' (ngModelChange)="youMethodName(gender)">Female
<br>
</div>
<button id="signup" class="btn btn-primary" type="submit" >Signup</button> </form>
in your ts file
youMethodName(model) {
console.log("TCL: youMethodName -> model", model)
}
Although, answer is already accepted. I want to give solution of this problem if you do not want to use Two way data binding. this way is useful for breaking down two way data binding. So, there is no need for [(ngModel)] . Complete Working Demo found here in StackBlitz Link
Your HTML ...
<form>
<fieldset id="group1">
<input type="radio" (change)="handleChange($event)" name="group1" value="Male"/>Male
<input type="radio" (change)="handleChange($event)" name="group1" value ="Female"/> Female
</fieldset>
<div *ngIf="_prevSelected"> {{ _prevSelected}} </div>
<button (click)="click()">Show</button>
<div *ngIf="clicked"> <span> selected value is {{_prevSelected}} </span></div>
</form>
Your class file is..
private _prevSelected: any;
clicked:boolean;
handleChange(evt) {
let target = evt.target;
if (target.checked) this._prevSelected = target.value;
}
click(){
this.clicked =true;
}
I'm making a project in angular. When i click on the checkbox i want that there is a line trough the text. But when i click on the checkbox nothing happens ..
Can you help me ?
Thanks !
<h3>Todos list</h3>
<ul class="list-group">
<li *ngFor="let todo of todos; let i = index" class="list-group-item">
{{todo.text}}
<p [ngClass]="{strike: deleted}">test</p>
<label>
<input type="checkbox" ng-model="deleted">
</label>
<button class="btn btn-danger btn-small" (click)="deleteTodo(i)">X</button>
</li>
</ul>
At first, in Angular it's [(ngModel)], not ng-model as in AngularJs.
Also, you can't have a single variable (deleted) to handle all items in your *ngFor.
To make it wok apply the changes:
...
<p [ngClass]="{strike: todo.deleted}">test</p>
<label>
<input type="checkbox"
[(ngModel)]="todo.deleted">
</label>
...
DEMO
use <s> tag instead of <strike> tag
Ex:
if you want <strike> Not Aailable </strike>
and it is not supported by angular 4 and above versions then,
use <s>Not Available</s>
Different 'ng-model name' in ng repeat - Possible?
<div ng-repeat="todo in todos">
<input type="text" ng-model="tag">
<button type="submit"ng-click="addTodo(todo._id)">Add</button>
</div>
In this case, there are some repeat todo item (based on todos json data) will show on frontend
My Problem: What i type on any input field , all input field showing same data
I need different ng-model name on each input field , I guess like this ng-model="tag($index)"
You could place the newly created model inside tag array by its $index, while declaring model inside the tag you should use array notation [] instead of ()
ng-model="tag($index)"
should be
ng-model="tag[$index]"
Markup
<div ng-repeat="todo in todos">
<input type="text" ng-model="tag[$index]">
<button type="submit"ng-click="addTodo(todo._id)">Add</button>
</div>
It is possible like below
<div ng-repeat="todo in todos">
<input type="text" ng-model="tag[todo]"> <--todo.key-->
<button type="submit"ng-click="addTodo(todo._id)">Add</button>
</div>
You can do it like this:
<input type="text" ng-model="todo.tag">
I have an Angular Dart component with the following html:
EDIT: For some reason some of my html did not copy properly. outside of the label tag I have:
<div class="btn-group btn-group-vertical" data-toggle="buttons">
`
<label ng-repeat="item in items" class="btn btn-primary btn-sm btn-block" ng-show="isItemVisible(item)">
<input type="radio" name="options" value="{{item}}" ng-model="selected">{{item}}
<span class="badge pull-right"><span class="glyphicon glyphicon-ok"></span></span>
</label>
</div>`
However, this never updates the model. I have also tried using onclick, ng-click, and ng-change with the same result- the functions never get called. Is there some directive that I'm using incorrectly?
Use Future in your ng-click so it will allow your model to get updated.
<input type="radio" name="options" value="{{item}}"
ng-model="selected" ng-click="radioButtonClicked();">{{item}}</input>
//Component Code:
void radioButtonClicked(){
new Future((){
//Use your selected model here.
});
}
$parent should do the trick. Here is working example:
HTML
<div>
<div ng-repeat="item in items">
<label for="{{item.name}}">{{item.name}}:</label>
<input id="{{item.name}}" type="radio" ng-model="$parent.$parent.selected" ng-value="item.value" />
</div>
<strong>Selected value:</strong> {{$parent.selected}} <br/>
</div>
Controller
$scope.items = [{
name:'Item1',
value: 'value1'
}, {
name:'Item2',
value: 'value2'
}, {
name:'Item3',
value: 'value3'
}];
$scope.selected = null;
This question already has answers here:
ul in the form not sending to the $_POST
(4 answers)
Closed 9 years ago.
Actually, I am using a list in which I am trying use my <li> element as a part of form.
I am doing something like as shown bellow :-
<form action="index.php" method="post">
<input type="hidden" name="search-type" value="commercial">
<ul>
<li name="search-option" id="buy" value="buy">inputBUY</li>
<li name="search-option" id="rent" value="rent">RENT/LEASE</li>
<li name="search-option" id="pg" value="pg">PG</li>
</ul>
<input type="submit" value="Submit" name="submit">
</form>
But when I submit this form there is no appearance of "search-option" in url means I am not getting any value for "search-option" to my php script.
Is there any way to do this without using any <input > element.
To do so, you need to add an event handler to the li or a parent container, save the item clicked and Ajax the result to the server, or build a form object in memory, or create a URL with the selections.
Here is an example that expects the search to be done on the SAME server as the page is on - I am using jQuery because it is the most convenient for what you are trying to do
I did not wire the Ajax in the live demo.
Live Demo
Suggested HTML
<ul id="search-option">
<li data-option="buy" class="sel">inputBUY</li>
<li data-option="rent">RENT/LEASE</li>
<li data-option="pg">PG</li>
</ul>
Search
<div id="result"></div>
Suggested jQuery
$(function() { // when page loads
$("#searchLink").on("click",function(e) { // when link clicked
e.preventDefault(); // stop the click from any further action
var option = $("#search-option li.sel").data("option"); // get the selected option
$.post("search.php",{"option":option},function(data) { // post the option
$("#result").html(data); // show the result
});
});
$("#search-option li").on("click",function() { // when LI is clicked
$(this)
.addClass("sel")
.siblings().removeClass("sel"); // Swap class
});
});
No, you must use form controls(inputs,select) in order to send data to the server or whatever place you want, not HTML tags
The short, direct answer is no. However....
Often with this you will find some javascript attatched to the list items. When Clicked the javasctipt will update the hidden form field with the clicked value.
Also note that value is not a standard attribute of li
Here is an example of how to do this with jQuery..
Update your html with:
<input type="hidden" id="search-type" name="search-type" value="commercial">
<ul id="selType">
<li name="search-option" id="buy" value="buy">inputBUY</li>
<li name="search-option" id="rent" value="rent">RENT/LEASE</li>
<li name="search-option" id="pg" value="pg">PG</li>
</ul>
And use the following (you will need jQuery and lean about $(document).ready
//Assign the value
$("#selType li").click(function(){
$("#search-type").val($(this).attr("value"));
});
See it in action here: http://jsfiddle.net/Xcgw4/
You can also use plain javasript but for this demo I'll use the jquery library because it makes life easy.
You would also want to do something to indicate what has been clicked etc.
You need to use proper form controls. Replace the li with a select like this:
<form action="index.php" method="post">
<select name="search-option">
<option value="buy">BUY</option>
<option value="rent">RENT/LEASE</option>
<option value="pg">PG</option>
</select>
<input type="submit" value="Submit" name="submit">
</form>
or a radio like this:
<form action="index.php" method="post">
<input type="purchaseType" name="buy" value="buy">BUY<br>
<input type="purchaseType" name="rent" value="rent">RENT/LEASE<br>
<input type="purchaseType" name="pg" value="buy">PG<br>
<input type="submit" value="Submit" name="submit">
</form>