this is a sample in code sand box
https://codesandbox.io/s/restless-shadow-iiw4p?file=/src/App.jsx
I want to create table that can be added.
However can not control input value.
How can I control multiple input object value in map?
In your code sample you did not call the setValues() function. That's why you could not control the input. Here are some modifications to your code:
const inputName = (index, event) => {
let tempValues = [...values];
tempValues[index].name = event.target.value;
setValues(tempValues);
};
I hope this code will work now. I have tested it in your codesandbox example also.
here is the link to that: https://codesandbox.io/s/purple-water-d74x5?file=/src/App.jsx
Related
I'm building up a user profile that has some addresses, the user can edit them, it's almost finished, but I'm stuck in setting the user edit address in a form.
Just like it shows in the GIF when I click the button no value is set, I'm using react-hook-form to build these forms.
This is the function that execute when I click on the button:
const editAddress = (i) => {
const addressClicked = addressList[i];
console.log(addressWatch());
setAddressValue("name", addressClicked);
setShowForm(true);
};
addressList is an array that is being looped, and then I get the key from the .map(v,i) and it returns an object with all the information that should populate the input fields for the user to edit it.
So, in the docs there is a function that is called "reset" that actually does exactly what I wanted, it wipes the current data from the form and it can replace with a new object data.
https://react-hook-form.com/api/useform/reset
The function looks like this now
const editAddress = (i) => {
const addressClicked = addressList[i];
addressReset(addressClicked);
setShowForm(true);
};
I am trying to select (highlight) the text in an input element whose value comes from a model, but it doesn't seem to work.
The element (part of component template) in question is as follows:
<input id="table-input-cell" ng-blur="$ctrl.inputBlur()"
ng-focus="$ctrl.inputFocus($event)" ng-model="$ctrl.activeText"
class="input-cell"/>
The controller function looks like this:
ctrl.inputFocus = function(focusEvent) {
let el = ctrl.inputView[0];
console.log(el.constructor.name);
console.log(`inputFocus called. contents: ${el.value} `);
el.select();
};
What I am seeing as the result on the page is this:
What I would like to see is this:
Here's the console output:
HTMLInputElement
budget_controller.source.js:261 inputFocus called. contents:
So it looks like the problem is that the ng-focus may be called before the value of the input box is populated by ng-model, which is why .select() isn't highlight anything.
Or maybe it something else? Anyway, is there some other life-cycle event in AngularJs I can use to set the selection range once the element is bound as has focus? I don't see any thing ngBound= in the dox.
Use the event target:
ctrl.inputFocus = function(focusEvent) {
̶l̶e̶t̶ ̶e̶l̶ ̶=̶ ̶c̶t̶r̶l̶.̶i̶n̶p̶u̶t̶V̶i̶e̶w̶[̶0̶]̶;̶
let el = focusEvent.target;
console.log(el.constructor.name);
console.log(`inputFocus called. contents: ${el.value} `);
el.select();
};
The DEMO on PLNKR
I am trying to read (using protractor and BDD) the default values of certain dropdowns. To do this, I have tried several lines of code but none of them works.
Here is the code that I am using, the console.log is not being executed for some reason. Why?
checkDropdownAssignment: function(dropdown,defaultValue) //Function to check the value assigned to a dropdown
{
let texto=[];
$$('* option:checked').each(function(element, index) { // Execute this operation for each element of the website
element.getText().then(function (text) { //Get text of the element in order to compare it with the endpoint afterwards.
texto.push(index.toString()); // Add one more component to the vector
texto[index]=text; // Save the text in a variable visible outside of this function.
console.log(texto[index]);
});
});
},
Thanks in advance.
Try this:
$$('*option:checked').all(by.tagName('option')).getAttribute('label').then(function(value){
for (var i=0; i<value.length; i++){
expect(value).toContain(arayOfExpectedResults[i]);
}
});
Here you get an array with all the labels inside the dropdown and compare them with the expected result, or use the array the way you want.
I´m new to stackoverflow and not an english native speaker, so apologies for any mistakes.
We have an Angular/C# project in a course of study and I need an Angular mat-select which works with an ID (number) but displays a String instead.
In my typescript class I already have an Array<number> fruitIDs . Now I want to take every element of the array and apply a function fruitName(fruitID) on it (fruitName(fruitID) returns a string).
My problem is that I need to put the elements of the array and their corresponding function values in a form like:
fruits =
[{value: idOfFirstFruit, viewValue: fruitName(idOfFirstFruit)},
{value: idOfSecondFruit, viewValue: fruitName(idOfSecondFruit)},....]
If I have an object in this form my mat-select can access and save value but display `fruitName(value)' instead.
I hope anyone can help. Thanks in advance!
Ok, if anybody is interested, I found the solution:
var fruitNrs:Array<number> = this.fruits.map(item => {return item.fruitNr});
var objArray: Array<{value:number,viewValue:string}> = [];
for (let fruitNr of fruitNrs){
objArray.push({value:fruitNr,viewValue:this.fruitname(fruitNr)});
}
I have an input field that is supposed to contain numbers.
It is bound to an object property.
I want input entered as 4,5 to automatically get converted to 4.5 in both model and view.
HTML:
<input data-ng-model="productContent(product.Id).Org" value="{{productContent(product.Id).Org | replaceComma}}" />
Control:
$scope.productContent = function (prodId) {
var content = $.grep($scope.productsContent, function (el) { return el.ProdId === prodId });
return content[0];}
Filter:
app.filter('replaceComma', function () {
return function (val) {
return (typeof val) == "string" ? val.toString().trim().replace(",", ".") : val
};
});
Result:
When I enter a number, at first the model (productContent) retrieves the correct object. Then the filter code is called and returns a correctly converted string. I would expect both the model and view to be updated to the filtered value, but both are updated with the unfiltered value. What am I doing wrong?
I have faced the same problem in the past but instead of creating my own filter, I took a different path and found something ready to use instead.
angular-input-masks by assisrafael one of my favourite angular extensions for this purpose:
https://github.com/assisrafael/angular-input-masks
Examples:
http://assisrafael.github.io/angular-input-masks/
Since the author has written the documentation, I don't want to get extensive on it and be outdated in the future. As a quick reference, look for ui-number-mask.
Maybe this is not a direct answer to your question, since it's not replacing commas with periods, but making you type the decimals instead.
On a side note, you can suppress the thousands separators with ui-hide-group-sep
I hope that's helpful, otherwise leave a comment and I'll be happy to continue to assist you!
-Helvio