How does one access a value from props props.id inside a controlled input?
What I want to achieve.
<input
name="lname"
value={pax.adult1.lname} // This gets/displays input on state change
onChange={handleChange}
type="text"
placeholder="Last name"
className="form-control"
/>;
What I have tried:
<input
name="lname"
value={pax.adult`${props.id}`.lname} // This throws an error
onChange={handleChange}
type="text"
placeholder="Last name"
className="form-control"
/>;
I have also tried the following
value={pax.adult + props.id + `.lname`} // NaN.lname
And
value={`pax.adult${props.id}.lname`} // This displays the right value "pax.adult1.lname" but as a string
Any help will be appreciated.
Try it like that:
<input
name="lname"
value={pax[`adult${props.id}`].lname}
onChange={handleChange}
type="text"
placeholder="Last name"
className="form-control"
/>;
The code between the { } is just normal JS. So to access a property in an object using a variable in JS, you use square brackets and pass a string, list so: obj["aString"].
In your case, it would be:
pax["adult" + props.id].lname
or, to make it better looking:
pax[`adult${props.id}`].lname
Related
I have a method that is toggling between two inputs.
toggleModToLod(configurableOption) {
console.log(configurableOption);
configurableOption.isModField= !configurableOption.isModField;
}
<a ng-click="$ctrl.toggleModToLod(configurableOption)" ng-init="">MOD or LOD</a>
<input ng-if="configurableOption.isModField" type="text" class="form-control" ng-model="value.mod" placeholder="MOD">
<input ng-if="!configurableOption.isModField" type="text" class="form-control" ng-model="value.lod" placeholder="LOD">
It works fine, but if i had before filled the MOD field and after that i changed to LOD field the request contain both values, is there any way to have in my request only the selected value from the selected input ?
You can make the switch a toggle or checkbox or other form element
<label><input type='radio' ng-model="value.which" value='MOD' /> MOD</label>
<label><input type='radio' ng-model="value.which" value='LOD' /> LOD</label>
<input ng-if="value.which=='MOD'" type="text" class="form-control" ng-model="value.mod" placeholder="MOD">
<input ng-if="value.which=='LOD'" type="text" class="form-control" ng-model="value.lod" placeholder="LOD">
Then when you send your request, you'll have the which variable which will tell you which value to use. Additionally, you'll have a built in switcher that will automatically work by setting value.which
just clear both values from model everytime you toggle:
toggleModToLod(configurableOption) {
console.log(configurableOption);
configurableOption.isModField= !configurableOption.isModField;
$scope.value.mod = undefined; // however you're setting these on the controller / directive
$scope.value.lod = undefined;
}
I've created a Netlify form on my GatsbyJS site. The form itself works just fine. However, I am having issues changing the subject of my form. I have followed the instructions found in the Netlify forms documentation. In the documentation it states:
"[...] add a subject field to your form, and the value of that field will be used for the notification email subject. This field does not need to be visible to your users."
I am using a hidden subject field with the value of my subject in order to set subject of my form:
<input type="hidden" name="subject" value="My subject" />
I am receiving submission from the form but the subject is not taking effect. Any clues on what I am missing ??
After doing some research I found a error in my code:
Failed form propType: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly.
so I changed value to be defaultValue instead:
<input type="hidden" name="subject" defaultValue="My subject" />
However, this doesn't seem to solve my issue. Same result as before: I am receiving the form, but subject doesn't seem to take effect.
Been going through Netlify forms debugging guide, but haven't been able to find anything that solves issue. Also tried using HTML to React parser but that didn't do anything either.
The form itselves I am using:
<form
name="contact"
method="POST"
data-netlify="true"
className="hero-form"
data-netlify-honeypot="bot-field"
>
<input type="hidden" name="form-name" value="contact" />
<input type="hidden" name="bot-field" />
<input type="hidden" name="subject" value="My subject" />
<p>
<input type="text" name="name" placeholder="Dit navn" />
</p>
<p>
<input type="email" name="email" placeholder="Din email" />
</p>
<p>
<input type="phone" name="phone" placeholder="Dit tlf. nr." />
</p>
<p>
<textarea
name="message"
placeholder="Skriv evt. hvad det handler om"
rows="5"
></textarea>
</p>
<p>
<button type="submit">Send</button>
</p>
</form>
You can customize the subject of emails by including a subject field.
HTML:
<form
...
data-netlify="true"
data-netlify-honeypot="bot-field"
>
...
<input type="hidden" name="subject" value="Subject to be replaced..."/>
...
</form>
JavaScript:
fetch('/', {
method: 'POST',
headers: { ‘Content-Type’: 'application/x-www-form-urlencoded' },
body: encode({
'form-name': form.getAttribute('name'),
'subject': 'New message',
…dataForm,
}),
})
Reference: https://community.netlify.com/t/custom-subject-on-forms-not-working/13564
What's the correct syntax to use a prop for an element id except but with a prefix. Do I have to assign each to a variable and use a string literal, or can I do it inline?
e.g.
<input id="first_{id}" type="text" value={firstName} />
<input id="last_{id}" type="text" value={lastName} />
Use ${} outside your value, which is called template literals in javascript
{`your-prefix-${yourValue}`}
I would prefer a string interpolation syntax like so
<input id={`first_${id}`} type="text" value={firstName} />
I have multiple input fields under different headings:-
<label>User</label>
<input type="text" ng-model="a.arr.username"/>
<input type="text" ng-model="a.arr.userdob"/>
<input type="text" ng-model="a.arr.userpanNo"/>
<label>Employee</label>
<input type="text" ng-model="a.arr.empname"/>
<input type="text" ng-model="a.arr.empdob"/>
<input type="text" ng-model="a.arr.emppanNo"/>
<label>Daily Workers</label>
<input type="text" ng-model="a.arr.dwname"/>
<input type="text" ng-model="a.arr.dwdob"/>
<input type="text" ng-model="a.arr.dwpanNo"/>
I want to save above data in the format:- [{a.arr.username:any value,a.arr.userdob:any value,a.arr.userpanNo:any value},{a.arr.empname:any value,a.arr.empdob:any value,a.arr.emppanNo:any value},{a.arr.dwname:any value,a.arr.dwdob:any value,a.arr.dwpanNo:any value}].
In my directive:-
scope.a.array=[];
var properties = Object.keys(scope.a.arr);
for(var i=0;i<properties.length;i++){
scope.a.array.push({});
scope.a.array[scope.a.array.length - 1][properties[i]] = scope.a.arr[properties[i]];
};
But above code is creating data like this:- [{a.arr.username:any value},{a.arr.userdob:any value},{a.arr.userpanNo:any value},{a.arr.empname:any value},{a.arr.empdob:any value},{a.arr.emppanNo:any value},{a.arr.dwname:any value},{a.arr.dwdob:any value},{a.arr.dwpanNo:any value}]
It is pushing different properties in array instead of combining them. What is the correct way of doing this?
I am saving my data in below format
$scope.data = {
name:'abc',
Address:[{
Address1:'XXXX',
state:'XXXX',
County:'XXXX'
}]
}
<input type="text" class="form-control" name="Address1" ng-model="data.Address[0][Address1]">
<input type="text" class="form-control" name="state" ng-model="data.Address[1][State]">
<input type="text" class="form-control" name="County" ng-model="data.Address[2][County]">
While retrieving the data I am getting data in below format:
$scope.data = {
name:'abc',
Address:[{
state:'XXXX',
County:'XXXX'
}]
}
Where one of the array objects (Address1) is missing so I am unable to update the form model even if the data is available. Is there any workaround to solve the above issue?
Change your input model to index 0, because that's the array item you are targeting. After that change your reference to the . notation and not using brackets []. You can use the brackets, but make sure to make them strings, like data.Address[0]['Address1']. But it's not necessary here. Also:
<input type="text" name="Address1" ng-model="data.Address[0].Address1">
<input type="text" name="state" ng-model="data.Address[0].state">
<input type="text" name="County" ng-model="data.Address[0].County">
(removed class for simplicity)
(are you using state or State?)