guys I did a code for knowing if my checkbox is checked and works fine:
HTML:
<div ng-app>
<div ng-controller="UserController">
<table id="tblUsers" class="Table">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Last Name</th>
<th>Phone</th>
</tr>
<tr ng-repeat="user in users">
<td><input type="checkbox" ng-model="user.checked"/></td>
<td>{{user.name}}</td>
<td>{{user.lastName}}</td>
<td>{{user.phone}}</td>
</tr>
</table>
</div>
</div>
This is the Angularjs code:
function UserController($scope) {
$scope.users = [
{ checked: false, name: 'Jorge', lastName: 'Martinez', phone: 012345 },
{ checked: false, name: 'Juan', lastName: 'Perez', phone: 78964 }
];
$scope.updateUser = function () {
angular.forEach($scope.users, function (user) {
if (user.checked) {
user.name = $scope.nameUpdate;
user.lastName = $scope.lastNameUpdate;
user.phone = $scope.phoneUpdate;
}
});
};
}
The problem is when I change the checkbox for a radio button:
<td><input type="radio" ng-model="user.checked"/></td>
When I do this, this value "if(user.checked)" appears as "undefined".
Some one that knows how to fix this or how to know if the radio button is checked or not in the AngularJS controller.
see https://docs.angularjs.org/api/ng/input/input%5Bradio%5D
you'll want to have multiple radio buttons, each with it's own value to set some property to (although this is weird for a yes no you are better off with a checkbox, but if you had multiple values this is how radio buttons work)
<input type="radio" ng-model="user.checked" ng-value="true" />Yes
<input type="radio" ng-model="user.checked" ng-value="false" />No
when you have just one radio button, if it is not checked by default or you have no ng-value it will be undefined, but also having only one radio button, you could never unselect it.
You need to give the radio button a value.
<td><input type="radio" ng-model="user.checked" value="true"/></td>
<td><input type="radio" ng-model="user.checked" value="false"/></td>
Working Fiddle
Related
Validation not working for radio button in Angular.
When radio button is not selected, form is getting submitted.
Also not showing error.
HTML Code
<form [formGroup]="feedbackFormWithArray" (ngSubmit)="submitData()">
<table class="res-tbl">
<tbody formArrayName="skills" class="tbl">
<tr class="skill-tr table-data" *ngFor="let skill of skills; let i = index">
<td class="table-data res-td tbl-border skill-td">
<b value="skill.skillId"><span class="text-danger">*</span>{{skill.skillName}}<span>:</span></b><p class="skill-description-p"> {{skill.skillDescription}}</p>
</td>
<td class="table-data center rating-td">
<input type="radio" formControlName="{{ i }}" [value]="3" />
</td>
<td class="table-data center rating-td">
<input type="radio" formControlName="{{ i }}" [value]="2" />
</td>
<td class="table-data center rating-td">
<input type="radio" formControlName="{{ i }}" [value]="1" />
</td>
</tr>
</tbody>
<div *ngIf="(submitted && skills.invalid)">
<small *ngIf="skills.errors?.required" class="text-danger">Please select Skills</small>
</div>
</table>
<Button type="submit" [disabled]="feedbackFormWithArray.invalid" class="btn button-btn" >{{feedbackId ? 'Update' : 'Create'}}</Button>
</form>
TS Code
import { Validators } from '#angular/forms';
submitted : boolean = false;
this.feedbackFormWithArray= this.fb.group({
skills: this.fb.array(
this.skills.map((t) => {
this.fb.control(t);
}), {validators: Validators.required}
)
});
submitData() {
this.submitted = true;
}
How to solve this?
Thank you!
I am gonna guess you have a button inside your form, something like:
component.html
<button (click)="submitData()">Submit</button>
You could add a check to change submitted state like
submitData() {
if (this.feedbackFormWithArray.valid) {
this.submitted = true;
}
if (this.feedbackFormWithArray.invalid) {
// Do something like this.tryToSubmitWithError = true
// Popup to say you cannot submit
// ...
}
}
I think also you wanted to use feedbackFormWithArray instead of skills in the *ngIf below:
<div *ngIf="(submitted && skills.invalid)">
<small *ngIf="skills.errors?.required" class="text-danger">Please select Skills</small>
</div>
That could be like:
<div *ngIf="tryToSubmitWithError && feedbackFormWithArray.invalid">
<small *ngIf="feedbackFormWithArray.errors?.required" class="text-danger">
Please select Skills
</small>
</div>
I have a table where I have a column name and near the column name I have a checkbox. That particular column name values inside the table by default are check boxes. What I need is that when I enable the checkbox near the column name, all the checkboxes in the table under that column should be enabled and when I disable the checkbox in column name all checkboxes in table under the column should also be disabled?
<div class="Container">
<div class="table-responsive">
<table class="table">
<thead class="table_header">
<tr>
<th>ID</th>
<th>Name</th>
<th>Category</th>
<th>Old date</th>
<th>New date</th>
<th>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> Status
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let form of formlist; index as i">
<td>{{ form.name }}</td>
<td>{{form.cat }}</td>
<td>{{form.olddate }}</td>
<td>{{ form.newdate }}</td>
<td>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
</td>
</tr>
</tbody>
</table>
</div>
</div>
What I need is that when I enable the checkbox near the column name status, all the checkboxes in the table under that column should be enabled and when I disable the checkbox in column name all checkboxes in table under the column should also be disabled?
You can give class to checkbox and with jQuery you can check enable or disable:
.attr("disabled",true)
.attr("disabled",false)
remove "vehicle1" id from <td> elements, then copy and paste script given below.
<script>
$(document).ready(function($){
$("#vehicle1").click(function () {
$('input:checkbox').not(this).prop('checked', this.checked);
});
});
</script>
In Angular
<label class="btn btn-filter">
<input type="checkbox" name="allTrades" [value]="trade" (change)="allTrades($event)">All Trades
</label>
<ng-container *ngFor="let trd of trade">
<label class="btn btn-filter">
<input type="checkbox" name="trades" [checked]="trd.selected" (change)="changeTradesByCategory($event)">{{ trd.label }}
</label>
</ng-container>
export class AppComponent {
name = 'Angular';
trade = [
{ label: 'aa', selected: false },
{ label: 'bb', selected: false },
{ label: 'cc', selected: false },
{ label: 'dd', selected: false }
];
allTrades(event) {
const checked = event.target.checked;
this.trade.forEach(item => item.selected = checked);
}
}
I have 2 radio buttons, which I assigned values of '0' and '1' respectively. I need to get the value when I click my Save Button but It returns an Undefined value. Here is my code. What could be my problem?
<tr ng-repeat="item in recruleData">
<td>
{{item.package_name}}
</td>
<td>
<input type="radio" name="radio" ng-model="radio.selectedProductBlock"
value="0" >A<br/>
<input type="radio" name="radio" ng-model="radio.selectedProductBlock"
value="1" > B
</td>
<a class="btn btn-primary pull-right" ng-click="radioValue();">Save</a>
</tr>
my JS Code
$scope.selectedProductBlock;
$scope.radioValue= function(){
alert($scope.selectedProductBlock);
}
You need to define a variable of type boolean inside the object radio,
$scope.radio = {};
$scope.radio.selectedProductBlock = false;
and then
And radioValue function
$scope.radioValue = function(){
console.log($scope.radio.selectedProductBlock);
}
According to your requirement, you need to define radio object in recruleData
each record
Ex :
$scope.recruleData = [
{"package_name" : "package1", "radio":{"selectedProductBlock":""}},
{"package_name" : "package1", "radio":{"selectedProductBlock":""}},
]
And radioValue function
$scope.radioValue= function(item){
alert(item.radio.selectedProductBlock);
}
In addition, you need to give a unique name for each row radio button groups. You can simply achieve that append $index to your radio button name.
HTML Code
<table>
<tr>
<th>Package</th>
<th>Actioins</th>
<th></th>
</tr>
<tr ng-repeat="item in recruleData">
<td>
{{item.package_name}}
</td>
<td>
<input type="radio" name="radio_{{$index}}" ng-model="item.radio.selectedProductBlock"
value="0" >A<br/>
<input type="radio" name="radio_{{$index}}" ng-model="item.radio.selectedProductBlock"
value="1" > B
</td>
<td><a class="btn btn-primary pull-right" ng-click="radioValue(item);">Save</a></td>
</tr>
</table>
Working JSFiddel
Is it possible to get the date and time when the user click the submit button in angular? For example i have a form with name and email input. When user done filling the input and click submit, the date and time will be showed to the table along with name and email. Here some snippets:
//app.service.ts
insertData(data: App) {
this.dataList.push({
name: data.name,
email: data.email,
});
}
//app.component.ts
onSubmit(form: NgForm) {
this.AppService.insertData(this.AppService.selectedData);
}
<!--app.component.html-->
<form #dataForm="ngForm" (ngSubmit)="onSubmit(dataForm)">
<label>Name</label>
<input class="form-control" name="nama" #nama="ngModel" [(ngModel)]="AppService.selectedData.name"><br>
<label>Email</label>
<input class="form-control" name="email" #email="ngModel" [(ngModel)]="AppService.selectedData.email"><br>
<button type="submit">Submit</button>
</form>
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Time submitted</th>
</tr>
<tr *ngFor="let data of data">
<td>data.name</td>
<td>data.email</td>
<td>Time submitted</td>
</tr>
</table>
Just do :
this.dataList.push({
nama: data.nama,
email: data.email,
time : new Date(),
});
This will store the current time when you are inserting data and then use simply on the template side.
{{data.time | date: 'dd/MM/yyyy'}}
I am using angularjs v1.
I would like to have exclusive radio buttons in each table row. Each row will look something like below;
The radio buttons should be exclusive. In other words, only 1 of the buttons can be selected at any one time. When the send radio button info button is pressed, information regarding which radio button is selected should be sent to the angularjs controller.
Here is my html code;
<div ng-controller="RadioButtonsCtrl">
<table class="table table-hover data-table sort display">
<thead>
<tr>
<th class="Off_">
Off
</th>
<th class="On_">
On
</th>
<th class="Toggle_">
Middle
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in radio_button_items">
<td><input type="radio" ng-model="model.select_off"></td>
<td><input type="radio" ng-model="model.select_on"></td>
<td><input type="radio" ng-model="model.select_middle"></td>
<td>
<button ng-click="SendInfo(item)">Send radio button info</button>
</td>
</tbody>
</table>
Here is the controller code;
.controller('RadioButtonsCtrl', ['$scope',
function ($scope) {
$scope.SendInfo = function (row) {
console.log(row);
}
}])
Radio button groups are defined by giving them the same name attribute:
<td><input type="radio" ng-model="model.select_off" name="foo"></td>
<td><input type="radio" ng-model="model.select_on" name="foo"></td>
<td><input type="radio" ng-model="model.select_middle" name="foo"></td>
Taken from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-type
radio: A radio button. You must use the value attribute to define the
value submitted by this item. Use the checked attribute to indicate
whether this item is selected by default. Radio buttons that have the
same value for the name attribute are in the same "radio button
group". Only one radio button in a group can be selected at a time.