Angular - input value and select placeholder not working - javascript

I'm creating a form that has some select and some input types, as shown below.
<div id="datiRichiesta">
<div *ngFor="let d of formDatiRichiesta" class="form-row">
<input *ngIf="d.type=='text'"
type="text"
class="form-control"
placeholder="{{d.placeholder}}"
[(ngModel)]="model[d.name]"
name="{{d.name}}"
(focus)="$event.target.placeholder = ''"
(blur)="$event.target.placeholder = d.placeholder"
value="richiesta.prova"/>
<select *ngIf="d.type=='select'"
class="form-control"
name="{{d.name}}"
[(ngModel)]="model[d.name]"
required>
<option selected disabled value="">{{d.placeholder}}</option>
<option *ngFor="let b of elencoBanche" value="{{b.id}}">{{b.nome}}</option>
</select>
</div>
</div>
I've got two main issues:
I need to set a value on the input type, but it is not working. I know that I should use something like ngValue, or at least so I've read online, but most examples are referred to angularjs and I got a bit confused. If I simply put [ngValue]="richiesta.prova" the browser complains that Can't bind to 'ngValue' since it isn't a known property of 'input'.
I need to show a placeholder for the select, but it's not working since the first <option> is part of the dropdown list as all the others. On this I don't have a clue, because it should really work as it is.
Any help will be appreciated, maybe with some explanation, I sense I'm missing something about angular binding.
Thanks.

1) NgModel sets the value. If model[d.name] is not empty - it will be set.
https://angular.io/guide/forms
2) How to show placeholder (empty option) in select control in Angular 2?
These 2 lines are redundant:
(focus)="$event.target.placeholder = ''"
(blur)="$event.target.placeholder = d.placeholder"

If your placeholder is not working then it simply means that you have assigned them some value to that input. In your case, I am 100% sure that {{ d.placeholder }} holds some value( might be value equal to ' '). Assign this value to NULL. Then see the result.
placeholder="{{d.placeholder}}"

Related

Angularjs, select Box create blank option at first always

I got some problems with selectbox.
In my original code, I receive an object through $http calling, and that is like below.
[
{key:'user_id', value:'ID'},
{key:'user_name', value:'Name'},
{key:'user_gender', value:'Gender'},
{key:'user_phone', value:'Phone'},
{key:'user_email', value:'Email'},
{key:'user_birth', value:'Birthday'},
];
When I tried to put values of this object into option, it made 'blank option' automatically.
To solve this, I saw two posts
Angular JS Remove Blank option from Select Option
Why does AngularJS include an empty option in select?
but any solutions of these could not help me.
How can I fix this?
Here's my fiddle.
Select box create blank option
I'll wait some handsome or pretty developers who will solve my problem. :)
Try This
HTML Code -
<select ng-options="opt as opt.value for opt in searchOpt.option" ng-model="searchOpt.selected">
</select>
The ngOptions attribute can be used to dynamically generate a list of elements for the element using the array or object obtained by evaluating the ngOptions comprehension expression
Working Jsfiddle
<select ng-model="itemSelected">
<option
ng-repeat="item in data" value="{{ item.key }}"
ng-selected="{{item.key === itemSelected}}">
{{ item.value }}
</option>
</select>
https://plnkr.co/edit/QthDhkvku8UvcVHaWcGG?p=preview
Check the code. Use ng-selected in your option for selected first element.

Angular select model not setting value

I have an array of strings, that are account numbers. When a record in a table is clicked i provide a modal to update the record and one of the fields is account number. This displays and some what correctly but seems to loss its two way binding with vm.accountNumber but also does show the value that the model is.
vm.accountNumber always has a value that is set when the table row is being clicked for editing. It just never makes it to the select despite the model. I suspect im losing the two way link and it is creating its own variable for the model.
<select class="ui search fluid selection dropdown" id="accountSearch" ng-model="vm.accountNumber">
<!--ng-options="account for account in vm.accounts.slice(1)">-->
<option ng-repeat="account in vm.accounts | limitTo: vm.accounts.length : 1" value="account" ng-selected="account == vm.accountNumber">{{account}}</option>
</select>
Here is a snippet of the accounts array.
0:"-"
1:"0001"
2:"0002"
3:"0003"
4:"0004"
I would say just use ng-options directive instead of ng-repeating option
<select class="ui search fluid selection dropdown"
id="accountSearch" ng-model="vm.accountNumber"
ng-options="account for account in vm.accounts">
</select>
Demo Plunkr
Though I'd like to point out your problem was with option value attribute,
you should change
value="account"
to
value="{{account}}"

Angular options as-syntax with access to selected object?

I use as-sytax(like ng-options="p.id as p.name for p in options") for select options.
The problem is, I need access to p too. For example, to display additional label near input or button or even change inputs.
So, I can't do it, since I need to set just id. It could be a solution to use another variable and set id using $watch. But I have selected id and it will be a mess to sync all this things...
Is there solutions for similar problems?
Plnkr: http://plnkr.co/edit/7LStlQnkVGBjwsI3d9NO?p=preview
this is what you need
model will be the ID:
<div ng-init="init();">
<select ng-model="model" ng-options="o.id as o.label for o in options"></select>
<span>Your data is: {{model}}</span>
</div>
model will be complex data object:
<div ng-init="init();">
<select ng-model="model" ng-options="o as o.label for o in options"></select>
<span>Your data is: {{model.data}}</span>
</div>

angular drop down selected ng-model not binding

I'm currently having a problem with selecting drop downs which are not working correctly with angularjs. Couldn't find anything that relates to my problem. It seems odd.
I am a newbie to angularjs so please forgive my ignorance
I am currently trying to retrofit angularjs onto my MVC5 application.
Here are the issues;
When $scope.selected = $scope.options[0] is declared it is assigned, but as if the select list does not recognize the model's object and creates a new option
Once you change the selected option on the drop-down, selected the object in scope is now empty?
Here is the code
The comprehension expression is incorrect. It looks like you want the whole option as the selected value so use this:
ng-options="o.text for o in options"
You should change your
<select ng-model="selected" ng-options="o.code as o.text for o in options"></select>
to
<select ng-model="selected" ng-options="o as o.text for o in options"></select>
to make it work as you expected.
because the documentation says select as label for (key , value) in object but in your case select is equal to code property of the object, not the object itself.
<div>
<select ng-model="selected" ng-options="o.code as o.text for o in options"></select>
<br />Code: {{ selected.code }}
<br />Text: {{ selected.text }}
</div>
Your ng-model will contain the value of the select (in this case the index [0,1,2,etc]). So you are attempting something like this "1.code" or "2.text".

Unable to set a input field with ExtJS

I have a onChange event that should trigger the update of an input field. Here is my code:
HTML:
<select id="builds" onchange="setBuild()">
<option value="select">Select</option>
...
</select>
<input type="text" id="buildInfo" name="buildInfo" style="margin-top:10px;" value=""/>
ExtJS:
function setBuild(){
var value = Ext.get("builds").dom.options[Ext.get("builds").dom.selectedIndex].text;
Ext.get("buildInfo").update(value);
}
I've verified that I'm passing a valid value but I'm still unable to update the value for my input element. Any idea what I'm missing?
Update method is typically used to replace inner html of the element. perhaps you can just set the value of the buildInfo element by Ext.get("buildInfo").value = value .
Honestly though I have never seen extjs used in this way :)
For input field: Ext.get('binfo').dom.value = value

Categories

Resources