How to make the radio button checked if the initial value is true?
Using the defaultChecked property, available for <input type="checkbox"> and <input type="radio"> - https://reactjs.org/docs/uncontrolled-components.html#default-values
<input type="radio" name="radio-group" value="1" defaultChecked />
<input type="radio" name="radio-group" value="2" />
<input type="radio" name="radio-group" value="3" />
Sometimes the issue can be fixed by removing the name attribute and instead using a conditional checked value:
<li>
<label>
<input
type="radio"
value="medium"
checked={this.state.size === "medium"}
onChange={this.handleChange}
/>
Medium
</label>
</li>
<li>
<label>
<input
type="radio"
value="large"
checked={this.state.size === "large"}
onChange={this.handleChange}
/>
Large
</label>
</li>
Source Here: https://magnusbenoni.com/radio-buttons-react/
Add the checked attribute to your radio button, e.g. checked={field.input.value}. [JS Bin]
Adding a defaultChecked should be the idea here and not the checked value.
Related
At first, all checkboxes are checked.
Then i'm just checking 2 of them and press search.
Checkboxes and Search-Button:
<input type="checkbox" id="stat2" ng-true-value="true" ng-false-value="false" ng-model="ts.status.check2" />
<label for="stat2">Status 2</label>
<br />
<input type="checkbox" id="stat3" ng-true-value="true" ng-false-value="false" ng-model="ts.status.check3" />
<label for="stat3">Status 3</label>
<br/>
<input type="checkbox" id="stat1" ng-true-value="true" ng-false-value="false" ng-model="ts.status.check1" />
<label for="stat1">Status 1</label>
<br />
<input type="checkbox" id="stat4" ng-true-value="true" ng-false-value="false" ng-model="ts.status.check4" />
<label for="stat4">Status 4</label>
<br />
And then a new page (new URL) is loading, on this page there is a 'back' button.
When i press the back button, i'm getting back to the first page, and alle 4 checkboxes are selected again, how can i make it possible, that only the ones are checked, which i checked first?
Back-Button
<div class="btn-group container panel-footer">
<button type="button" onClick="history.go(-1);return true;" class="btn">Back</button>
</div>
Use $rootScope for maintaining your data:
$rootScope.checkState = {
check1: true,
check2: false,
check3: true,
check4: false
};
And then in your view:
<input type="checkbox" id="stat2" ng-true-value="true" ng-false-value="false" ng-model="$root.checkState.check1" />
(Do this for all your checkboxes with the according field)
I am trying to display a list of users. I need to use disabled filled inputs with first name, last name, email and a last attribute with radio buttons.
I can easily display the list of name and email but I did not succeed display the good checked button. I tried to use the ng-init directive but this is not working
<div ng-repeat="user in displayUsers" class="text-black form-inline">
<input type="text" value="{{user.nom}}" class="form-control" disabled>
<input type="text" value="{{user.prenom}}" class="form-control" disabled>
<input type="text" value="{{user.email}}" class="form-control" disabled>
<span ng-init="response={{user.response}}">
<input type="radio" class="radio-inline" name="" value="1" ng-model="response" disabled>En attente
<input type="radio" class="radio-inline"name="" value="2" ng-model="response" disabled>Oui
<input type="radio" class="radio-inline" name="" value="3" ng-model="response" disabled>Non
</span>
</div>
That is not what ngInit is for, nor is ngInit necessary. ngModel is in use and it should be in control of whether the radio button is checked or not. Just make sure the model value always has an appropriate value. If the model value is not a simple string, you can use ngValue to specify which model value should result in the radio button being checked.
<span>
<input type="radio" class="radio-inline" name="" ng-value="1" ng-model="user.response" disabled>En attente
<input type="radio" class="radio-inline"name="" ng-value="2" ng-model="user.response" disabled>Oui
<input type="radio" class="radio-inline" name="" ng-value="3" ng-model="user.response" disabled>Non
</span>
I am trying to implement radio button group validation inside angular's ng-repeat.
HTML
<div ng-repeat="driver in drivers">
<input required type="radio" value="M" name="driverGender" ng-model="driver.gender">
<input required type="radio" value="F" name="driverGender" ng-model="driver.gender">
</div>
Name attribute should change in each repeat. I tried appending $index value, but it's not working properly when drivers are dynamically added and removed. What is the best way to implement this?
In your code all radio buttons will relate with each other, because name attribute of all is the same. You should identify each radio buttons group. For example:
<div ng-repeat="driver in drivers">
<input required type="radio" value="M" name="driverGender[{{driver.id}}]" ng-model="driver.gender">
<input required type="radio" value="F" name="driverGender[{{driver.id}}]" ng-model="driver.gender">
</div>
Just try this If you need like below
Think their is two repeats in model, then code of the view should be like this
<div ng-repeat="driver in drivers" class="ng-scope">
<input required="" type="radio" value="M" name="driverGender0" ng-model="driver.gender"/>
<input required="" type="radio" value="F" name="driverGender0" ngmodel="driver.gender">
</div>
<div ng-repeat="driver in drivers" class="ng-scope">
<input required="" type="radio" value="M" name="driverGender1" ng-model="driver.gender"/>
<input required="" type="radio" value="F" name="driverGender1" ngmodel="driver.gender"/>
</div>
So this is the code for get this
<div ng-repeat="driver in drivers">
<input required type="radio" value="M" name="driverGender{{$index}}" ng-model="driver.gender">
<input required type="radio" value="F" name="driverGender{{$index}}" ngmodel="driver.gender">
</div>
you can change name attribute based on index value , can you check out my answer in following link
In controller
$scope.drivers = [{id:1,name:'test',gender:'M'}];
In html
<div ng-repeat="driver in drivers">
<input required type="radio" value="M" name="driverGender{{$index}}" ng-model="driver.gender">
<input required type="radio" value="F" name="driverGender{{$index}}" ng-model="driver.gender">
</div>
https://plnkr.co/edit/byLRBhUI2Ezc5CofHnPC?p=preview
Finally I found one solution.
<div ng-repeat="driver in drivers">
<div ng-form="radioForm">
<input required type="radio" value="M" name="driverGender{{$index}}" ng-model="driver.gender">
<input required type="radio" value="F" name="driverGender{{$index}}" ngmodel="driver.gender">
{{radioForm.$error}}
</div>
</div>
Now the validation in happening thorugh the ng-form. Radio buttons will be grouped because $index.
I have multiple input elements and I want one ng-model for them all, but when I use the model with ng-show it is not that sensitive , so how can I go .
<form ng-model="yes">
<input type="checkbox">1</input>
<input type="checkbox">2</input>
<input type="checkbox">3</input>
</form>
i.e I have multiple checkboxes and I want them all ticked to show another element
What do you mean with "sensitive"?
This should work if you want to set boolean properties:
<form name="myForm">
<input ng-model="myModel.prop1" type="checkbox" value="1">
<input ng-model="myModel.prop2" type="checkbox" value="1">
<input ng-model="myModel.prop3" type="checkbox" value="1">
</form>
But if you mean different options for one model you have to use radio buttons:
<form name="myForm">
<input ng-model="myModel.prop1" type="radio" value="1">
<input ng-model="myModel.prop1" type="radio" value="2">
<input ng-model="myModel.prop1" type="radio" value="3">
</form>
You can debug your model by putting {{myModel}} somewhere in the source code, so you will see immediately the effect of your changes
<form name="myForm">
<input ng-model="myModel1" type="checkbox">Option A <br/>
<input ng-model="myModel2" type="checkbox">Option B <br/>
<input ng-model="myModel3" type="checkbox">Option C <br/>
<div ng-show="(myModel1 && myModel2 && myModel3)">ABC</div>
</form>
Demo
I'm trying to use radio buttons that shows different elements with ng-show, and i dont get it to set a default value in the model.
I've got the following example code (also fiddle).
<div ng-app>
<input type="radio" ng-model="input" name="input" value="a" />
<input type="radio" ng-model="input" name="input" value="b" />
<h2 ng-show="input == 'a'">A</h2>
<h2 ng-show="input == 'b'">B</h2>
</div>
I've tried with checked="checked" but it gets overdid by angular. ng-checked="true" gives that radiobutton propper check, but it doesnt set the model to 'a'.
I know it's possible to fix this in a controller but i want to do it completely without any javascript.
Use ng-init http://jsfiddle.net/ysxR9/2/
<div ng-app ng-init="input='a'">
<input type="radio" ng-model="input" name="input" value="a" /> A <br />
<input type="radio" ng-model="input" name="input" value="b" /> B <br />
<br />
<br />
<h2 ng-show="input == 'a'">A</h2>
<h2 ng-show="input == 'b'">B</h2>
</div>
Usually its usage is not quite recommended but in single cases it is fine to use it.
What ng-init does is to execute the given expression in the context of the current scope, i.e. $scope.$eval(expression); this means that you can put the directive wherever you want, just be aware of the target scope:
<div ng-app>
<input type="radio" ng-model="input" name="input" value="a" ng-init="input='a'" /> A <br />
<input type="radio" ng-model="input" name="input" value="b" /> B <br />
<br />
<br />
<h2 ng-show="input == 'a'">A</h2>
<h2 ng-show="input == 'b'">B</h2>
</div>