Toggle button inside angular reactive form - javascript

In my angular reactive form i am trying to use three state toggle switch for which i have tried three state switch separately in the link
Three state toggle stackblitz: https://stackblitz.com/edit/angular-6-template-driven-form-validation-gh1dj1
And i need to implement the same with same css inside reactive form on each row inside formarray.
For which i have tried the same html and css and given as formcontrolname like,
<div class="switch-toggle switch-3 switch-candy">
<ng-container #buttonIcon *ngFor="let option of options" >
<input type="radio" formControlName="state" [checked]="value === option"
[value]="option" />
<label (click)="onSelectionChange(option)" for="{{option}}">{{option.id}}
</label></ng-container> <a></a>
</div>
But i couldn't achieve the result.
Reactive form stackblitz: https://stackblitz.com/edit/disable-group-control-value-on-another-control-value-for-yqraay
Please click over the add button in the second stackblitz to see the result.. Added the css in app.component.css..
Kindly help me to implement the three state toggle switch as like in the first stackblitz into the reactive form in second stackblitz and need to get the values of selected toggle..

Just add an [id] to the input tag and an [attr.for] to the label tag. Something like this:
<div
class="switch-toggle switch-3 switch-candy">
<ng-container
#buttonIcon
*ngFor="let option of options">
<input
type="radio"
formControlName="state"
[value]="option"
[id]="i+option" />
<label
[attr.for]="i+option">
{{option}}
</label>
</ng-container>
<a></a>
</div>
Here's a Working Sample StackBlitz for your ref.
Thanks to A.Winnen for his comments on the performance implications of using the previous approach.

The options array in your reactive component is different than the 3 way switch you implemented. The one in the real component does not have the id.
[
"on",
"na",
"off"
]
You can still use that like this:
<ng-container #buttonIcon *ngFor="let option of options" >
<input type="radio" formControlName="state" [checked]="value === option"
[value]="option" />
<label (click)="onSelectionChange(option)" for="{{option}}">
{{option}} //**refer the object as the id filed is missing**
</label>
Second difference is, you are missing the onSelectionChange function in your reactive component

Here's a stackblitz demo for your referance.
https://stackblitz.com/edit/angular-szsw3k

Related

value not binding on choose from list with angular ngDefaultControl

I have list of option and using ngDefaultControl Angular directive but formcontrol value show empty on button click.
I want to bind value to form control on button click without using setValue or patchValue methods.
example:
<h3>input text search dropdown</h3>
<div class="result">
Selected Value:
{{
rootForm.get('category')?.value
? rootForm.get('category')?.value
: 'Please select value'
}}
</div>
<br />
<form [formGroup]="rootForm">
<div class="list-popup">
<ul class="list" [formControlName]="'category'" ngDefaultControl>
<li class="item" *ngFor="let option of listValues" [value]="option">
<button type="button" class="item-option" tabindex="-1">
<span class="item-label">{{ option }}</span>
</button>
</li>
</ul>
</div>
</form>
is it possible to bind value from UI in control for the same on selection? Could you please suggest me workaround.
here is the stackblitz
Thanks in advance.
Angular doesn't know what to do when you put a formControl on a ul. In order to do what you want, you have to create a component (or directive) which implements ControlValueAccessor and move the code related to your form control there.
Implementing ControlValueAccessor means implementing the following three functions: writeValue, registerOnChange, registerOnTouched. In this way, Angular will know what to do with your component.
For example, you can follow this example

vue 2 how to update v-model if value is changed?

I have a few cards works like radio-button.
<div class="card">
<input
checked=""
class="card__input"
type="radio"
v-model="templatePicked"
:value="template.value"
name="template"
:id="template.id"
>
<label :for="template.id" class="card__label"></label
<ui-select
name="version"
placeholder="Select a version"
:keys="{ label: 'text', value: 'value' }"
:options="templateVersions"
v-model="template"
></ui-select>
</div>
So, when we click on select item (in ui-select) we update id and value for card radio button. The question is, how to update templatePicked? Because now it updates only when I click on radio button.
P.S
I use vue 2.2.6.
Select component: https://josephuspaye.github.io/Keen-UI/#/ui-select
It has #change event but I don't understand how to use it in my case.
P.S.S
It actually works perfect in vue 1.0.28, I used :value.sync="ubuntu" on component.
Any help, please!
You can listen to the #select event (when an item is selected) or for example #focus. See https://josephuspaye.github.io/Keen-UI/#/ui-select (events), for more options.
<ui-select
name="version"
placeholder="Select a version"
:keys="{ label: 'text', value: 'value' }"
:options="templateVersions"
v-model="template"
#select="setTemplatePicked(template)"
></ui-select>
Next add a method (for example setTemplatePicked) which sets the selected template.

AngularJS ng-repeat radio buttons aren't checked by default

I'm trying to check the first index, but it isn't working. I also tried to do this with ng-init.
<div class="col-md-4" ng-repeat="category in categories">
<label>
{{category.Name}}
<input type="radio" ng-checked="$index==0?true" name="pageNumber" ng-model="$parent.pageNumber" ng-value="category.Name" />
</label>
</div>
Does anyone know why?
ngChecked shouldnot be used with ngModel (https://docs.angularjs.org/api/ng/directive/ngChecked)
You can try this
<input type="radio" name="pageNumber" ng-model="$parent.pageNumber" ng-value="category.Name" />
</label>
and when the categories get populated in you controller you can add the following code after that
$scope.pageNumber = $scope.categories[0];
Try using the following expression $index==0?true:false or simply $index==0
ngChecked is expecting an expression, so by saying ng-checked="$index == 0", you're basically saying that the checkbox will always be checked or unchecked by default based on the condition output.
remove ng-value as you can also pass the element data using ng-model.
Working fiddle : http://jsfiddle.net/LYuCG/16/
You can simple write ng-checked="$first"
<div class="col-md-4" ng-repeat="category in categories">
<label>
{{category.Name}} - {{$index}} -
<input type="radio" ng-checked="$first">
</label>
</div>
Example http://jsfiddle.net/Lvc0u55v/8864/

Change class of div based on radio button inside it?

I have the view below. What I want is to change the class of the div based on whether or not the radio button inside it is checked. What am I doing wrong? Note: I'm a newbie to AngularJS and this project is me trying to learn Angular..
<div class="col-use-select" ng-repeat="show in shows" ng-class="{show[name]:'test'}[tvshow.chosen]">
<input id="{{show.name}}" type="radio" name="checkbox" ng-model="tvshow.chosen" ng-value="show.name">
<label for="{{show.name}}">{{show.name}}</label>
</div>
You are applying ng-class to div of ng-repeat hence it is assigned to all div's. You need to create a child div, add ng-class to that div with your condition. it will toggle the class of only that child div
<div class="col-use-select" ng-repeat="show in shows">
<div ng-class="test:tvshow.chosen">
<input id="{{show.name}}" type="radio" name="checkbox" ng-model="tvshow.chosen" ng-value="show.name">
<label for="{{show.name}}">{{show.name}}</label>
</div>
</div>
What I got from the question is that you want to change the class on a particular radio button selection. The html markup that you have shown is not a valid one when assigning a class on conditional basis in angular.
Please find one below which will change the css class of the div on selection of option and then choose another class on the basis of alternate selection
<div ng-app ng-controller="test">
<div class="col-use-select" ng-repeat="show in shows" ng-class="{test:tvshowChosen=='abc',test2:tvshowChosen=='def'}">
<input id="{{show.name}}" type="radio" name="checkbox" ng-model="$parent.tvshowChosen" ng-value="show.name">
<label for="{{show.name}}">{{show.name}}</label>
</div>
</div>
In this example the line:
ng-class="{test:tvshowChosen=='abc',test2:tvshowChosen=='def'}"
Signifies that if tvshowChosen value is abc then test class will be applied or in the second case test2 will be applied.
This line:
ng-model="$parent.tvshowChosen"
Over here $parent is used as ng-repeat creates its own isolated scope. So $parent will target the parent scope and not individual isolated scopes so that the selection can be a valid one.
Working Fiddle

How to add uncheck to last element in ngRepeat Check-Boxex using Angular js?

I am using Check-box model as seen here http://vitalets.github.io/checklist-model/ for check boxes with Angularjs. Some of the Check-boxes need the last check-box element to uncheck all the others. How would I add a ngClick attribute to the last element in a set of Checkboxes using the check-box-model module.
Try Below Solution:
Working Demo
<label ng-repeat="role in roles">
<input ng-click="$last&&mytest()" type="checkbox" checklist-model="user.roles" checklist-value="role.id"> {{role.text}}
</label>
Click on last check box "admin" and it will be alert box
Well I don't know much about checklist-model but you can add ngClick to the last element like this:
<label ng-click={{$last && yourFunction || ''}} ng-repeat="role in roles">
<input type="checkbox" checklist-model="user.roles" checklist-value="role"> {{role}}
</label>
Though, It will add ng-click attribute to all elements but this can work for you. Its an alternative.

Categories