I have a radio button group that is being rendered dynamically. I have an NgModel assigned to this group and I want that whenever the button is clicked, a function is called that accesses which button is clicked. I added different values to each button but somehow the value being assigned is coming blank. Here is my code:
component.html:
<div class="form-group row position-relative" *ngFor="let item of options; let i=index">
<div class="col-4">
<label class="text-capitalize">{{item.label}}</label>
</div>
<div class="col-4">
<label class="text-capitalize">{{item.value}}</label>
</div>
<div class="col-3">
<input type="{{builderService.editObj.type}}" name="checked" [value]="item.value" (click)="changeSelectedElement($event)" [(ngModel)]="checkedElement">
</div>
<div class="col-1 text-right">
<i class="fa fa-times pointer" (click)="editService.fnRemove('options', i)"></i>
</div>
</div>
component.ts:
changeSelectedElement(e){
console.log('this.checkedElement -------> ', this.checkedElement, e.target.value);
}
The log statement logs a blank value:
this.checkedElement ------->
I need to access the item.value of each radio button here. The items are being printed properly when using string interpolation so no, item.value is not blank.
Related
in my angular app I am using npm-hm-carousel. I need to auto select the field in the middle of the carousel like in the photo.
But also i need to bind one of the ids to the selected item, when i scroll the carousel.
<ngx-hm-carousel [(ngModel)]="currentIndex" [show-num]="3" [infinite]="infinite" [drag-many]="true"
[aniTime]="200" [data]="selectedServiceObj.packages" class="carousel c-accent">
<section ngx-hm-carousel-container class="content">
<article class="item cursor-pointer" ngx-hm-carousel-item
*ngFor="let package of selectedServiceObj.packages; let i = index"
[ngClass]="{'visible': currentIndex===i}">
<div class="package">
<div class="well">
<div class="row header-part">
<div class="col-sm-2">
<input type="radio" name="package" [value]="package._id" [checked]="i===currentIndex" [(ngModel)]="inputSelectedPackageId" (change)="changed($event)">
</div>
</div>
</div>
</div>
</article>
<ng-template #infiniteContainer></ng-template>
</section>
<ng-template #carouselContent let-package let-i="index">
<article class="item cursor-pointer" [ngClass]="{'visible': currentIndex===i}">
</div>
</article>
</ng-template>
<ng-template #carouselPrev>
<div class="click-area">
<i class="glyphicon glyphicon-chevron-left" aria-hidden="true"></i>
</div>
</ng-template>
<ng-template #carouselNext>
<div class="click-area">
<i class="glyphicon glyphicon-chevron-right" aria-hidden="true"></i>
</div>
</ng-template>
<!-- <ng-template #carouselDot let-item>
<div class="ball bg-accent" [class.visible]="item.index === item.currentIndex"></div>
</ng-template> -->
</ngx-hm-carousel>
but in this way the value is not setting to the [(ngModel)] directive. I think it is because the radio icon is not clicking. but when i use the below code fragment for select the radio button manually, the [value] binds to [(ngModel)]
<input type="radio" name="package" [value]="package._id" [checked]="" [(ngModel)]="inputSelectedPackageId">
Thank you!
as i know we can't bind a value to a radio button. Since the clicked state won't change in a radio button. But it is good if you can use checkbox. you ll able to bind values to a checkbox and identify the state change
With Cypress, I'm unable to click a dropzone to upload a file. It feels like there is something preventing the click event from happening. Am I clicking the wrong element?
It works manually. (I don't know which specific element is actually recieving the click though)
I've tried { force: true } - Cypress shows a successful click here but nothing happens.
I've tried parent and child elements.
I've tried the Cypress.$ command to bypass the cy wrapper.
// spec code
it.only('has clickable area for upload', () => {
cy.visit('#bulkPolicyOnboarding')
.get('#BulkPolicyOnboardingStartup')
.find('.file-upload')
.find('input[type=file]')
.click({ force: true })
})
// component code
<template>
<section id="widget-grid" v-show="IsShown === true">
<div>
<div class="row">
<article class="col-md-12">
<div class="jarviswidget jarviswidget-color-darken" data-widget-sortable="false" data-widget-togglebutton="true" data-widget-editbutton="false" data-widget-fullscreenbutton="false" data-widget-colorbutton="true" data-widget-deletebutton="false">
<header>
<h2>Add Document</h2>
</header>
<div>
<div class="widget-body">
<div class="row">
<div class="col-md-12">
<file-upload v-model="file"></file-upload>
</div>
</div>
<br />
<div class="row">
<div class="col-md-offset-10 col-md-2">
<a class="btn btn-labeled btn-info" v-on:click="UploadFileToServer"><span class="btn-label"><i class="fa fa-plus"></i></span>Upload File</a>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
</section>
</template>
// nested component (the one I'm trying to click?)
<template>
<div class="file-upload">
<input type="file" style="display: none;" #change="FileChanged" />
<div
class="uploader"
#click="OpenFile"
#dragover="DragOver"
#dragenter="DragEnter"
#dragleave="DragLeave"
#drop="DropFile"
>
<span class="instructions">click to select, or drag and drop a file</span>
<label
class="selected-file"
style="font-size: 1em;"
v-html="selectedFile"
></label>
<span class="x" v-show="HasFile()" #click="RemoveFile">✖</span>
</div>
</div>
</template>
I'm expecting on click (like in manual testing), that the event would fire and the window pops up for file select -- but nothing happens on click in Cypress.
UPDATE:
Per Recep Karadas, I've tried the .uploader selector, but same result:
I am trying to create a page which users can use to create custom forms. I will be giving the user a drop-down menu. From that drop-down menu, user will be able to select the type of question - like text box, radio button, check box, date and etc. - and then based on that selection, I want to add that type of input into my DOM form.
On submit, I want to store the value of these questions in JSON format.
Any suggestions? What is best approach to tackle this or how I can implement it?
You don't need any package, the best way to do this is like this:
<div ngbDropdown class="nav-item dropdown cursor">
<a class="nav-link" ngbDropdownToggle>
DropDown
</a>
<div ngbDropdownMenu class="dropdown-menu">
<a class="dropdown-item" (click)="option1 = !option1">
Form 1
</a>
<a class="dropdown-item" (click)="option2 = !option2">
Form 2
</a>
</div>
</div>
<form #form="ngForm">
<div class="form-option1" *ngIf="option1Selected">
<!-- YOUR FORM 1 -->
</div>
<div class="form-option2" *ngIf="option2Selected">
<!-- YOUR FORM 2 -->
</div>
...
<button type="submit"></button>
</form>
And them in your component:
option1 = "false";
option2 = "false";
The doc of *ngIf is here
Have a look at ng-dynamic-forms. I've used it on a project before and it really helped creating forms dynamically.
It even provides an import / export functionality which you could use to store the form/questions including the provided answers in JSON format.
sidenote: I am in no way connected to the mentioned project.
EDIT: I feel an example like in this stackblitz shows how much control you have in terms of dynamic forms with the basic Angular utilities.
https://stackblitz.com/edit/deep-nested-reactive-form?file=app%2Fapp.component.html
Reactive Forms are your answer. There is no perfect way to do what you want. But I picked out a particular piece of an example from an old project. So, on one point I check for the type of comparators I have available due to my first choice. After that I check if I need a field that requires a simple input field or a datepicker. There are SO many ways to do this.
<div class="col-7">
<!-- Text Input Field for most cases that don't involve time comparisons -->
<div *ngIf="!doesRequireDateInput(i) && checkIfComparatorOptionIsEmptyOrNull(i)">
<div class="string-input-field" formArrayName="values">
<div [formGroupName]="j" *ngFor="let val of getValues(condition); let j = index">
<div class="input-group">
<input formControlName="value" type="text" class="form-control py-0" placeholder="Search for...">
</div>
</div>
</div>
</div>
<!-- Date Input Field -->
<div *ngIf="doesRequireDateInput(i) && checkIfComparatorOptionIsEmptyOrNull(i)">
<div class="string-input-field row" formArrayName="values">
<div [formGroupName]="j" *ngFor="let val of getValues(condition); let j = index">
<div *ngIf="j === 0" class="input-group mb-3">
<input type="text" formControlName="value" name="dateFrom" class="form-control py-0" style="text-align: center" [owlDateTimeTrigger]="dt3"
[owlDateTime]="dt3">
<owl-date-time [pickerType]="'calendar'" #dt3></owl-date-time>
<div class="input-group-append">
<span class="input-group-text" style="border-bottom-right-radius: 0px; border-top-right-radius: 0px" id="date-for-input">
<i class="fa fa-calendar" aria-hidden="true"></i>
</span>
</div>
</div>
<div *ngIf="j === 1" class="input-group mb-3">
<input type="text" formControlName="value" name="dateFrom" class="form-control py-0" style="text-align: center" [owlDateTimeTrigger]="dt3"
[owlDateTime]="dt3">
<owl-date-time [pickerType]="'calendar'" #dt3></owl-date-time>
</div>
</div>
</div>
</div>
</div>
I have two check boxes. 1. filter by data, 2. Show pending.. Below that I am populating some data from database in list view. What I need is, if I press filter by data check box, then my list view should reload and show the data from data format. Means that the data which is added first in the database should show first in list view.
In my database I have one parameter called status, which will show the status pending or ordered. So, if I press show pending check box, then the records having pending status, should populate in my list view. Here is my code :
<div class="row" >
<div class="col col-50" style="border-right: 1px #ccc solid;">
<input type="checkbox" style="margin: 8px;"> <span class="assertive" style="margin: 0px;">Show pending</span>
</div>
<div class="col col-50">
<input type="checkbox" style="margin: 8px;"> <span class="assertive" style="margin: 0px;">sort by date</span>
</div>
</div>
<ion-list>
<ion-item class="item-icon-right clsOrders" ng-repeat="mydash in MyOrders" ng-click="ShowDetails(mydash)">
<div class="row" >
<div class="col col-20 clsOrderDateMonth">
<span class="clsOrderDate">{{mydash.dateAdded}}</span>
<div class="spacer" style="height: 5px;"></div>
<span class="assertive clsOrderMonth">{{mydash.monthAdded}}</span>
</div>
<div class="col col-50">
<span class="balanced clsOrderDetailNumber">{{mydash.customerName}}</span>
<div class="spacer" style="height: 10px;"></div>
<div class="clsStatusCount row cls0Padding">
<div class="col col-50 cls0Padding">
Item: <span class="assertive">{{mydash.productCount}}</span>
</div>
<div class="col col-40 cls0Padding">
<span class="balanced clsMakeContentRight">{{mydash.orderStatus}}</span>
</div>
<div class="col col-20 cls0Padding">
</div>
</div>
</div>
<div class="col col-25 ">
<div class="spacer" style="height: 5px;"></div>
<div class="col col-40 cls0Padding" style="margin-top: 26px;font-size: 11px;">
Amount: <span class="assertive">{{mydash.orderTotalAmount}}</span>
</div>
</div>
</div>
<i class="icon ion-chevron-right icon-accessory"></i>
</ion-item>
</ion-list>
How can I do that?
For UI:
I think you have to associate an action function for checkbox change event.
If you use, <ion-checkbox> you have ionChange event to execute necessary data processing logic, like this:
<ion-checkbox (ionChange)="processData(parameters)">
</ion-checkbox>
Check out the documentation and this issue on ionic forum.
Also, check if (click)="processData(parameters)" works. Not tested this though.
In the list below, UI should be simple enough by using ngFor and ngIf.
Script
Now, the data you are supposed show in list has to be manipulated in this processData(parameters) method.
Note: But, looking at your use case, I am not sure you are using the correct design. Maintaining status of pending/ordered for one device is fine. But data will get invalid for multiple devices, as different devices' status for what data has loaded and what data is pending will vary. Need more help here understanding the exact use case though.
I want to select the first item in my ng-repeat as soon the list is loaded to the user, is there an easy way to do that?
Right now im using the ng-click, but i dont know how to automatic click that first item.
This is my ng-repeat
<div ng-hide="hideMembershipSection" ng-repeat="membership in memberships" class="row">
<div class="membership-box col-lg-9 col-md-9 col-sm-9 col-xs-8">
<img class="img-responsive" ng-src="/images/onlinesalg_ny/{{ membership.image }}">
<h1 class="text-uppercase">{{ membership.titel_onlinesalg }}</h1>
<p>{{ membership.onlinesalg_produktbeskrivelse }}</p>
</div><!-- col-lg-9 -->
<div class="membership-box__price col-lg-3 col-md-3 col-sm-3 col-xs-4 text-center">
<h1>
<small>Kr.</small>
{{ membership.pris }},-
</h1>
<button ng-click="selectMembership(membership)" type="button" ng-class='{"btn-success": membership.pid == success}' class="text-uppercase btn btn-primary" ng-disabled="membership.pid == success">{{ membership.pid === success ? "valgt" : "vælg"}}</button>
</div><!-- col-lg-9 -->
In the controller, after the code where you load the list into $scope.memberships, what about using the line:
selectMembership($scope.memberships[0]);
This is essentially doing what ng-click is doing, but after the list is loaded. It depends on what your selectMembership function does though.
you can use ng-init to select first element by default as in ng-init="ngModelFieldName=memberships[0]
i dont know the name of the ng-model hence gave the name ngModelFieldName
<div ng-hide="hideMembershipSection" ng-repeat="membership in memberships" ng-init="ngModelFieldName=memberships[0]" class="row">