Angular 5 select elements issue - select

Really new to Angular and I encountered a strange issue.
I have a list of ingredients and in every ingredient there is a metrics select element.
<div class="ingerdients__wrapper" *ngFor="let ingredient of ingredientsList">
<div class="ingerdients__amount-wrapper">
<p>Amount</p>
<input type="number" [(ngModel)]="ingredient.amount">
</div>
<div class="ingerdients__amount-wrapper">
<p>Unit</p>
<select [(ngModel)]="ingredient.metric.id" id="Metric_{{ingredient.metric.id}}" name="Metric_{{ingredient.metric.id}}">
<option *ngFor="let metric of metricsList" [ngValue]="metric.id">{{metric.name}}</option>
</select>
</div>
<div class="ingerdients__desc-wrapper">
<textarea cols="30"
rows="3"
placeholder="Description"
[(ngModel)]="ingredient.name"
(keydown.Tab)="addIngredientToList()"
></textarea>
</div>
<div class="ingerdients__add-ingredient-btn-mob-warpper">
<div class="ingerdients__add-ingredient-btn-warpper mgr" (click)="addIngredientToList()">
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
<div class="ingerdients__add-ingredient-btn-warpper" (click)="deleteIngredientFromList(n)">
<i class="fa fa-minus" aria-hidden="true"></i>
</div>
</div>
Everything works fine until I add a new ingredient using function:
addIngredientToList() {
this.ingredientsList.push(this.createNewIngredient());}
What happens is that when I change values of a metric on an ingredient , it will change the other selection on other ingredients on the list.
I can get it to work normally by doing a submit of the page after I create new ingredients on the list.
Got any ideas on whats causing this issue? Any advice greatly appreciated.

Related

Why is the first row in an ASP.NET Core MVC table un-editable?

By far the weirdest problem encountered to date: I am populating a table using #foreach (var item in Model) and every row has an edit and delete button.
The edit button triggers a modal where the user can make changes and click the Save button to save any changes. It works perfectly on every row except the first row.
Let's say I have 2 records in the table with IDs 1 & 2. I can edit 2 but not 1 where 1 is on the first row of the table. If I delete 1 leaving only 2 (now obviously at the top), I can't edit that so it is not related to the data in the item but somehow related to the fact that it is the first item being loaded into the table.
The view is returning with an enormous URL which includes a __RequestVerificationToken and there is no POST action recorded in the network.
This is the code in the Index.cshtml which calls the modal:
<td style="text-align: center">
<a asp-action="Edit" data-bs-toggle="modal" data-bs-target=" #("#editNode-" + item.Id)">
<i class="fas fa-edit" ></i>
</a>
#await Html.PartialAsync("_EditNodePartialView", item)
</td>
This is the _EditNodePartialView markup and code:
#model UnidAdmin.Models.BundleNodeViewModel
<div class="modal fade" id="editNode-#Model.Id">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" style="color:darkorange">Edit Node #Model.Id Bundle #Model.BundleId</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close" style="background-color:transparent; color:aquamarine; border-style:none">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form asp-controller="Nodes" asp-action="Edit" asp-route-id="#Model.Id" asp-route-src="bndlnd" method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="row pb-3">
<div class="col form-group text-start">
<label asp-for="Name" class="control-label text-start" style="color:darkorange">Node Name</label>
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<div class="col form-group text-start">
<label asp-for="Comment" class="control-label text-start" style="color:darkorange"></label>
<input asp-for="Comment" class="form-control" />
<span asp-validation-for="Comment" class="text-danger"></span>
</div>
</div>
<div class="row pb-3">
<div class="col form-group form-check text-center">
<label class="form-check-label text-start" style="color:darkorange">
<input class="form-check-input" asp-for="IsTest" /> #Html.DisplayNameFor(model => model.IsTest)
</label>
</div>
<div class="col form-group form-check text-center">
<label class="form-check-label text-start" style="color:darkorange">
<input class="form-check-input" asp-for="IsLocked" /> #Html.DisplayNameFor(model => model.IsLocked)
</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" onclick="displayBusyIndicator()" data-bs-dismiss="modal">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
And this is the controller edit action method:
public async Task<IActionResult> Edit(int id, [FromForm]Node editnode, string src)
{
// Lots of code here //
return RedirectToAction(nameof(Index));
}
As I said, it hits the controller for every row except the first row, whatever the record.
Has anyone ever encountered anything like this and if so what was your solution?

Protractor finding a popup element in a web UI

I'm trying to hover the mouse over a given element so that the help balloon appears. I need help finding the element to take action on.
I'm new with protractor. I have the docs in front of me and I've also reviewed many SO postings regarding protractor and element finding. By and large I'm doing ok, but I have one that's a bit complicated and eluding my newb ability.
I've tried many variations of by.className(), by.css() and either it finds multiple elements, or None. The acp-help-circle appears 6 times in the given UI. I'm only sharing a snippet of the code (for brevity sake of course).
<ng-include src="'OtherSettingsTemplate'" class="ng-scope"><div class="nok-content-panel panel panel-default ng-scope ng-isolate-scope" is-collapsed="true">
<div class="panel-heading ng-scope util-clickable" ng-class="{'util-clickable':contentPanel.collapsable}" ng-click="contentPanel.headerClick($event);">
<i ng-show="contentPanel.collapsable" class="toggle-icon icon-states acp-caret-bottom" ng-class="{'acp-caret-bottom' : !contentPanel.isCollapsed, 'acp-caret-right': contentPanel.isCollapsed}" style=""></i>
<b class="ng-binding ng-scope">Other</b>
<div class="right ng-scope">
<i class="acp-help-circle ng-scope" popover-placement="left" popover-trigger="'hovertooltip'" uib-popover-html="'Doc Control and Doc Manager cannot be enabled at the same time for the same configuration. Please only enable the feature used within your Licensed Property Manager configuration.'" nok-popover="Doc Control and Doc Manager cannot be enabled at the same time for the same configuration. Please only enable the feature used within your Licensed Property Manager configuration."></i>
</div>
</div>
<div class="panel-collapse ng-scope in collapse" uib-collapse="contentPanel.isCollapsed" style="" aria-expanded="true" aria-hidden="false">
<div class="panel-body">
<div class="content-wrapper">
<form name="editApp.otherSettingsForm" class="otherSettingsForm ng-pristine ng-valid ng-scope" novalidate="">
<fieldset>
<div class="fieldsRow">
<div class="col-title">
<span class="label ng-binding">Document Control</span>
</div>
<div class="col-lef">
<nok-switch-button ng-model="editApp.configuration.otherSettings.dcEnabled" size="medium" is-disabled="editApp.configuration.otherSettings.docManagerEnabled && !editApp.configuration.otherSettings.dcEnabled" class="ng-pristine ng-untouched ng-valid ng-isolate-scope ng-not-empty"><div class="switch-button medium switch-button-off" ng-click="switchButton.toggleSwitch()" ng-class="{'switch-button-on': switchButton.on,
'switch-button-off': !switchButton.on,
disabled: switchButton.isDisabled,
readonly: switchButton.isReadonly}" style="">
<div class="switch-button-container">
<span translate="components.switch-button.onLabel" translate-values="" class="ng-scope">On</span>
<label>
<span></span>
<span></span>
<span></span>
</label>
<span translate="components.switch-button.offLabel" translate-values="" class="ng-scope">Off</span>
</div>
</div>
</nok-switch-button>
</div>
<div class="col-right">
</div>
</div>
<div class="fieldsRow">
<div class="col-title">
<span class="label ng-binding">Inky</span>
</div>
<div class="col-lef">
<nok-switch-button ng-model="editApp.configuration.otherSettings.inkyEnabled" size="medium" class="ng-pristine ng-untouched ng-valid ng-isolate-scope ng-not-empty"><div class="switch-button medium switch-button-off" ng-click="switchButton.toggleSwitch()" ng-class="{'switch-button-on': switchButton.on,
'switch-button-off': !switchButton.on,
disabled: switchButton.isDisabled,
readonly: switchButton.isReadonly}" style="">
<div class="switch-button-container">
<span translate="components.switch-button.onLabel" translate-values="" class="ng-scope">On</span>
<label>
<span></span>
<span></span>
<span></span>
</label>
<span translate="components.switch-button.offLabel" translate-values="" class="ng-scope">Off</span>
</div>
</div>
</nok-switch-button>
</div>
<div class="col-right">
</div>
</div>
<div class="fieldsRow p-t-10">
<div class="col-title">
<span class="label ng-binding">Doc Manager</span>
</div>
<div class="col-lef">
<nok-switch-button ng-model="editApp.configuration.otherSettings.docManagerEnabled" size="medium" is-disabled="editApp.configuration.otherSettings.dcEnabled && !editApp.configuration.otherSettings.docManagerEnabled " class="ng-pristine ng-untouched ng-valid ng-isolate-scope ng-not-empty"><div class="switch-button medium switch-button-off" ng-click="switchButton.toggleSwitch()" ng-class="{'switch-button-on': switchButton.on,
'switch-button-off': !switchButton.on,
disabled: switchButton.isDisabled,
readonly: switchButton.isReadonly}" style="">
<div class="switch-button-container">
<span translate="components.switch-button.onLabel" translate-values="" class="ng-scope">On</span>
<label>
<span></span>
<span></span>
<span></span>
</label>
<span translate="components.switch-button.offLabel" translate-values="" class="ng-scope">Off</span>
</div>
</div>
</nok-switch-button>
</div>
<div class="col-right">
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</ng-include>
Just a few of the many iterations I've tried...
element(by.className('acp-help-circle')) //finds > 1. The class is not unique.
element(by.cssContainingText('Doc Control and Doc Manager cannot be enabled at the same time for the same configuration. Please only enable the feature used within your Licensed Property Manager configuration.')) //this finds none.
Any help is appreciated
If your looking for the locator, Try any of the below locator to select help balloon
const ele = element(by.css('div.panel-heading>div>i.acp-help-circle'));
const ele = element(by.css('div.right>i.acp-help-circle'));
const ele = element(by.css('div.panel-heading>div>i'));
If you still get more than one element. Then try the below one
const ele = element.all(by.css('div.panel-heading>div>i.acp-help-circle')).get(1); //Change the index as per the index of your element in the element array.
Hope it helps you

Accordion open next on button click

Hi been searching for few days now but couldnt find anything. I have an accordion that has three accordion group, I have added a button to open the next accordion but cant seem to get it working. Can some one please help. here is what I have so far
<accordion [closeOthers]="true" style="margin-top:5px;">
<accordion-group *ngFor="let registration of registrationArray; let i = index" #groupval style="margin-top:5px;" [isOpen]="registration.isAccordionOpen">
<div accordion-heading style="width:100%;">
Registrant No. {{i + 1}}
<i class="pull-right float-xs-right glyphicon"
[ngClass]="{'glyphicon-chevron-down': groupval?.isOpen, 'glyphicon-chevron-up': !groupval?.isOpen}"></i>
</div>
<form [formGroup]="myGroup" (ngSubmit)="gotoAddons(myDetails)">
<div formArrayName="myDetails">
<div class="panel-body" [formGroupName]="i">
<div style="padding-top:20px;clear:both;">
<div style="width:100%;background-color:#578ebe;border: 1px solid #7ca7cc;">
Your Address
</div>
<div style="padding-top:30px;clear:both;">
<div style="width:100%">
<div style="float:left;width:30%;text-align:right;">
<span class="required">*</span><label>Address Line 1</label>
</div>
<div style="float:left;width:70%;padding-left:10px;">
<input autofocus class="form-control" type="text" id="address" name="address" formControlName="address" required>
<div *ngIf="myGroup.controls.myDetails.controls[i].controls.address.errors && (myGroup.controls.myDetails.controls[i].controls.address.dirty || myGroup.controls.myDetails.controls[i].controls.address.touched || submitted)" class="alert alert-danger">
<div [hidden]="!myGroup.controls.myDetails.controls[i].controls.address.errors.required">
Address Line 1 is required!
</div>
</div>
</div>
</div>
</div>
</div>
<div style="width:100%;" *ngIf="i < registrationArray.length - 1">
<div style="float:right;">
<button (click)="groupval.isOpen = !groupval.isOpen" class="btn green">Open next tab</button>
</div>
</div>
<div style="width:100%;" *ngIf="i == registrationArray.length - 1" >
<div style="float:right;">
<button type="submit" class="btn green">Continue</button>
</div>
</div>
</div>
</div>
</form>
</accordion-group>
</accordion>
Removed some code for clarification. Can some one please let me know how I can open the next accordion group on the button click. Thanks in advance
Here is a working example
plunkr
stackblitz link
stackblitz
In your case I see that you're actually just closing the opened panel and that's all. Along with this you need to open a next panel which can be done by setting its isOpen property to true.
A small plunkr with test implementation - https://stackblitz.com/edit/ngx-bootstrap-ifmpph?file=app/app.component.html

Keep buttons and form with select dropdown on same row in Bootstrap 3

I'm struggling to keep buttons, and a form with a <select> tag (including its label) all on the same row in Bootstrap 3. Whenever the form is rendered, it seems to add a line break before the form. Here's what I have put together so far (http://www.bootply.com/98022):
<div class="container">
<div class="row">
<button class="btn btn-default">Test 1</button>
<button class="btn btn-default">Test 2</button>
<form role="form" class="form-inline">
<div class="form-group">
<label for="selectUser">Select:</label>
<select id="selectUser" class="form-control selectWidth">
<option class="">One</option>
<option class="">Two</option>
<option class="">Three</option>
</select>
</div>
<div class="btn-group">
<button class="btn btn-default">Test 3</button>
</div>
</form>
</div> <!-- End Row -->
</div> <!-- End Container -->
I thought that the class="form-inline" would keep it on the same row. Unfortunately, this is how it renders:
This is a mock-up I created in an image editing program of what I'd like it to look like:
I have deliberately chosen to use the <select> element instead of Bootstrap dropdowns, as the interface on mobile devices is optimal (the list will be quite large and trying to select the correct option on a small screen is easier with a form <select> element).
I found similar questions, but most either don't address the <select> tag within a form, or are for older versions of Bootstrap (2.x). Any help would be greatly appreciated.
Thanks!
Your first two button are not inside the form tag.
It seems form-inline does not define styles for labels, so add a left float some padding and set the width of the select to auto.
<div class="container">
<div class="row">
<form role="form" class="form-inline">
<button class="btn btn-default">Test 1</button>
<button class="btn btn-default">Test 2</button>
<div class="form-group">
<label for="selectUser" style="float:left;padding: 6px 12px 2px 12px;">Select:</label>
<select id="selectUser" style="width:auto;" class="form-control selectWidth">
<option class="">One</option>
<option class="">Two</option>
<option class="">Three</option>
</select>
</div>
<div class="btn-group">
<button class="btn btn-default">Test 3</button>
</div>
</form>
</div> <!-- End Row -->
</div> <!-- End Container -->

Zurb's Foundation 4: How to use block grid to distribute groups of pre/postfix fields?

I'm dynamically creating forms that will have an unknown number of semantically-related text-fields that must share a row (in Foundation's sense of the word) and be distributed evenly within it. The blockgrid class seems the better option, but I can't get the pre and post fix classes to work within it.
Note: this isn't my actual code, but rather a generalized form of the problem to increase community utility
<ul class="large-block-grid-<? echo count($choices);?> row"> <!-- $choices = array of fields-->
<h6><span data-tooltip class="has-tip" title="">TooltipText</span></h6>
<li class="row collapse">
<div class="small-9 columns">
<label for="inputA">
<input type="text" id="inputA" name="inputA" placeholder="val" />
</label>
</div>
<div class="small-3 columns">
<span class="postfix radius">PostFix Label A</span>
</div>
</li>
<li class="row collapse">
<div class="small-9 columns">
<label for="inputB">
<input type="text" id="inputB" name="inputB" placeholder="val" />
</label>
</div>
<div class="small-3 columns">
<span class="postfix radius">PostFix Label B</span>
</div>
</li>
</ul>
I end up with postifixes that are taller than their corresponding fields and problems with the left margins/padding (see screen cap). Anyone?
Eventually, I figured out my issues. Description of solution first, then the (slightly) improved code below:
1) the <ul> element isn't a row in Zurb's sense, and applying the "row" class was buggering up the margins; it should have been in one.
2) left align was broken because block-grids should, it turns out, be nested inside the usual grid; adding a wrapping <div> with a n-column class fixed it.
3) can't wrap <input> in <label> tags if it is to be paired with a postfix (this is what causes the height problems on the postfix <span>; may just be that I can't have the field nested inside a block-level element at a different level than the <span> element it's paired with; I just deleted the <label> elements and was happy enough to have resolved the problem).
The code:
<!-- note that I've now wrapped everything in a column-classed div -->
<div class='large-12 columns'>
<ul class='large-block-grid-*'> <!-- * = php's count on an array of fields-->
<h6><span data-tooltip class='has-tip' title="">TooltipText</span></h6>
<li class='row collapse'>
<div class="small-9 columns">
<input type='text' id='inputA' name='inputA' placeholder='val' />
</div>
<div class="small-3 columns">
<span class='postfix radius'>PostFix Label A</span>
</div>
</li>
<li class='row collapse'>
<div class="small-9 columns">
<input type='text' id='inputB' name='inputB' placeholder='val' />
</div>
<div class="small-3 columns">
<span class='postfix radius'>PostFix Label B</span>
</div>
</li>
</ul>
</div>