In the below code I need to give index of the loop as Id of the html input element
<input type="text" data-bind="text:Value">
I tried data-bind="text: $index" , but i cant set it as Id attribute. Anybody know how to do it?
If you're trying to set the id of the element, try:
data-bind="attr: {id: $index}"
You are using input element. Try to use value instead of text binding like that:
<input type="text" data-bind="value: $index">
Related
I know about this way to send a input from the user to the typescript (angular) :
<form >
<input #input type="text" [(ngModel)]="inputColor" (input)="sendInput(input.value)" />
</form>
But its looking for not very effective , i create a reference to the DOM with #input and after that send the input.value .
After all, I am very confused about the input.value does he refer to #input or to to (input)=...;.
Bottom line, is there a more efficient way to pass the value the user puts into the box, into the typescript file and then use it for another tag in the HTML file?
For example the user put a size of text and i want to use with the use on another tag on HTML ....
I think you are trying to use angular input inside a html input tag, which is not possible.
You need to use a keyboard event handler like "keyup", "keydown"...
<input type="text" [(ngModel)]="inputColor" (keyup)="sendInput($event)" />
If i understand well, you re looking for $event ?
<input #input type="text" [(ngModel)]="inputColor" (input)="sendInput($event)" />
typescript side:
sendInput($event) {
console.log('input value:', $event.data);
}
But $event.data will only contain the last typed char, is it what you re looking for ?.
EDIT:
With (input), you can have the content of input in $event.target.value:
<input #input type="text" [(ngModel)]="inputColor"
(input)="sendInput($event.target.value)" />
First of you you have used ngModel with input, so your inputcolor will have that value, and you can use it. But if you want it passed to a method you can do it like :-
<input type="text" [(ngModel)]="inputColor" (change)="sentInput($event.target.value) />
Change event will be fired as soon as user is done typing and click anywhere else.
then have a sendInput method in ts to copy received value in a property
public sendInput(value) {
this.data = value;
}
OR
If you don't need two way binding, you can use ngModel for one way binding as well like :-
<input type="text" (ngModel)="inputColor" />
After this typescript value change will not impact, only change in template will be reflected in typescript variable.
I'm using ng-pattern :
<input type="text" ng-model="price" name="price_field" ng-pattern-restrict="/^[4]*$/" required only-digits>
Please let me know what to do that it does not accept any other numbers except 4. I am using directive for digits that is only-digits.
EDIT: SORRY WRONG ANGULAR VERSION - but if you can transform this to angularjs it will be work!
You can use (input) event in you HTML input element
<input type="number" (input)="check($event)">
Than in your ts you cehck value of input
check(event) {
console.log(event);
if (+event.data !== 4) {
event.target.value = '';
}
}
The pattern which you are mentioned is not a valid regex pattern. Instead of that try to use this /^([4]){1}?$/ Hope you will get it.
<input type="text" ng-model="price" name="price_field" ng-pattern-restrict="/^([4]){1}?$/" required only-digits>
Try to use below restrict pattern :
<input type="text" ng-model="price" name="price_field" ng-pattern-restrict="^[4]{1}?$" required only-digits>
And below validation message :
<div ng-messages="myForm.price_field.$error">
<span ng-message="pattern">Not a valid number!</span>
</div>
Different 'ng-model name' in ng repeat - Possible?
<div ng-repeat="todo in todos">
<input type="text" ng-model="tag">
<button type="submit"ng-click="addTodo(todo._id)">Add</button>
</div>
In this case, there are some repeat todo item (based on todos json data) will show on frontend
My Problem: What i type on any input field , all input field showing same data
I need different ng-model name on each input field , I guess like this ng-model="tag($index)"
You could place the newly created model inside tag array by its $index, while declaring model inside the tag you should use array notation [] instead of ()
ng-model="tag($index)"
should be
ng-model="tag[$index]"
Markup
<div ng-repeat="todo in todos">
<input type="text" ng-model="tag[$index]">
<button type="submit"ng-click="addTodo(todo._id)">Add</button>
</div>
It is possible like below
<div ng-repeat="todo in todos">
<input type="text" ng-model="tag[todo]"> <--todo.key-->
<button type="submit"ng-click="addTodo(todo._id)">Add</button>
</div>
You can do it like this:
<input type="text" ng-model="todo.tag">
I was wondering, is there a way to put text into an input field?
What i've got now is a placeholder, but that's actually an empty inputfield. So that's not what i'm looking for.
I'm looking for an (kind of) placeholder that's actually filled in into the input field, so not "background text"
This is with placeholder:
And this is what i want:
Is there any way to do this?
The value content attribute gives the default value of the input element.
- http://www.w3.org/TR/html5/forms.html#attr-input-value
To set the default value of an input element, use the value attribute.
<input type="text" value="default value">
All you have to do is use the value attribute of input tags:
<input type="text" value="Your Value" />
Or, in the case of a textarea:
<textarea>Your Value</textarea>
You seem to look for the input attribute value, "the initial value of the control"?
<input type="text" value="Morlodenhof 7" />
https://developer.mozilla.org/de/docs/Web/HTML/Element/Input#attr-value
<input type="text" value="Your value">
Use the value attribute for the pre filled in values.
TO give the prefill value in HTML Side as below:
HTML:
<input type="text" id="abc" value="any value">
JQUERY:
$(document).ready(function ()
{
$("#abc").val('any value');
});
I am trying to pass an input name to ng-show.
When the input's name is not an array, this works just fine (if it's just 'entity' instead of 'entity[entity_name]'), but when there's an array it's not working.
something about this syntax - 'ng-show = "investForm.entity[entity_name].$error.pattern"' is wrong:
<form name="investForm">
<label>Entity Name</label>
<input name="entity[entity_name]" rc-forms ng-pattern="/^[A-Za-z]+$/" type="text" ng-model="invest.entity_name" ng-required="invest.is_entity" />
<div ng-show="investForm.entity[entity_name].$dirty && investForm.entity[entity_name].$invalid">
<span ng-show="investForm.entity[entity_name].$error.pattern">Error: Please use English characters only!</span>
</div>
</form>
I found this question pretty intriguing, so I've been Googling for a while.
Apperently your problem is a JavaScript syntax error and I found it here:
angularjs form can not refer to input control when input name is array
You can use square-brackets. You have to reference your form element like this:
investForm['entity[entity_name]'].$error.pattern
I don't think you can use square brackets for the form name. Try replacing it with an underscore or something:
<form name="investForm">
<label>Entity Name</label>
<input name="entity_entity_name" rc-forms ng-pattern="/^[A-Za-z]+$/" type="text" ng-model="invest.entity_name" ng-required="invest.is_entity" />
<div ng-show="investForm.entity_entity_name.$dirty && investForm.entity_entity_name.$invalid">
<span ng-show="investForm.entity_entity_name.$error.pattern">Error: Please use English characters only!</span>
</div>
</form>