I am creating a form using redux-forms (v7.4.2). I am trying to conditionally render a field based on PROP values. To be clear, I am NOT trying to conditionally render a field based on the inpit of another field in the form. I want redux-forms to look at a prop value and render a field one-way or another base on the value of that props.
I tried the code below but it just shows both fields. The props are present (I can see them using react dev tools). Basically, what I'm aiming to do here is to look and see if a prop exisits. If the length of that array is > 0 then a user is edititng the form and I want to disable this field. Otherwise, if length === 0 then its a new record and the field is required.
{this.props.facilityCompliance.length === 0 ?
<Field
label="Facility Name"
name="facilityName"
placeholder="Facility Name"
component={renderInputField}
type="text"
validate={required}
/>
:
<Field
label="Facility Name"
name="facilityName"
placeholder="Facility Name"
component={renderInputField}
type="text"
disabled={true}
/>}
Related
I have two entities - Budget and Income. On the "view budget" page I have this hyperlink, from where the user can create an income to that specific budget:
Create income to this budget
// Result: /income/new?budget=1
// What I want: /income/new
Is it possible somehow to remove ?budget=1 and still pass on the budget.id as a POST variable value so the hyperlink becomes short: /income/new?
You cant pass post parameters with an anchor
You could use a form though, sth like:
<form action="{{ path('app_income_new') }}" method="POST">
<input type="hidden" name="budget" value="{{ budget.id }}">
<input type="submit" value="Create income to this budget">
</form>
should do the trick, maybe add some css to make it "look like a link"
In order to have this behavior with just an actual anchor <a> element you need to use a javascript event listener to build and submit a form element when the anchor is clicked. You can insert the related data (path & budget.id) into data attributes of the anchor. The event listener can access the data of the clicked anchor (so you can have many with different datasets). Below is a configurable example that can support additional fields by adding the field name where noted, and the appropriate data attribute.
const postAnchors = document.querySelectorAll(".post-link");
postAnchors.forEach((anchor) => {
anchor.addEventListener('click', function(e) {
const fields = [
'budget',
// to support additional fields add here
]
const form = document.createElement('form')
fields.forEach(field => {
if (anchor.dataset[field]) {
const input = document.createElement('input')
input.name = field
input.type = 'text'
input.value = anchor.dataset[field] // data-{field} value
form.append(input)
}
})
form.method = 'post'
form.action = anchor.dataset.action
document.querySelector('body').append(form)
form.submit()
})
})
Create income to this budget
For example,
<field name="name" type="text" required="ture" data-attribute-type="Guest" data-attribute-subtype="Guest1"/>
Here I have added data-attribute-type="Guest" and data-attribute-subtype="Guest1" these attributes and assigned values to it. Now I want to access those attributes/values while rendering jForm
<input type="text" name="jform[name]" id="jform_name" required="required" data-attribute-type="Guest" data-attribute-subtype="Guest1" >
You need to access custom attributes via the elements array like this:
Form field (I don't think you want to use data attributes):
<field name="myfieldname" type="myfieldname" required="true" access-type="Guest" access-subtype="Guest1"/>
Then you need to define a custom Field and do your magic (probably in render or renderField:
class JFormFieldMyFieldName extends JFormField
{
public function renderField($options = array())
{
$access_type = $this->element['access_type']);
$access_subtype = $this->element['access_subtype']);
// do whatever
}
}
This is all untested but hopefully gets you moving in the right direction.
Problem:
I have a Thymeleaf template in Spring MVC which I want to use for two things:
1) For creating a new entity in the database
2) For updating an existing entity in the database
There is only one tiny difference between those two use cases: The entity in the database has a version (optimistic locking) attribute set, so I want to remember this version as a hidden field in the template, which is easy to do.
To understand better where i am coming from here is my handler code for creating a new entity:
#GetMapping("/new")
String showMapFormForAdd( Model model ) {
model.addAttribute( "map", null ); // PASS null into it
return "map-form"; // same template
}
And here is the code for updating an existing entity:
#GetMapping("/{mapId}/update")
public String showMapFormForUpdate( #PathVariable Long mapId, Model model ) {
GameMap map = mapService.findMap( mapId );
model.addAttribute( "map", map ); // PASS the real map into it (with version!!!)
return "map-form"; // same template
}
And here is the code for the hidden version field in the Thymeleaf template:
<input type="hidden" th:value="${map?.version}" name="version" />
However, when the template is rendered after the first handler (creating), I get an Exception, that the property version does not exist (its true, it doesn't exist).
Question:
How can I tell Thymeleaf, to only query the version and set it to value in the hidden field, only if the property version does exist in the "map" model which is injected into Thymeleaf?
You can add conditional th:value
<input type="hidden" th:value="${map.version != null ? map.version : ''}" name="version" />
I have a master and a child component. The child component persists the data for the create mode as well as the edit mode. The child has a data section as follows which is being used when the component is in create mode
data() {
return {
title: '',
description: '',
organizer: '',
startdate: '',
enddate: '',
email: '',
phone: ''
}
},
and my inputs in create mode are as follows
<input type="text" placeholder="enter event title here" class="form-control" v-model="title">
In the edit mode, I am updating a prop value on the client as follows, which is
props:['currentevent']
The value of the currentevent is being passed from the master component to the child component and is also the value that is currently being edited.
so, the complete code for handling an input value looks like as follows
<input type="text" placeholder="enter event title here" class="form-control" v-if="currentevent" :value="currentevent.title">
<input type="text" placeholder="enter event title here" class="form-control" v-else v-model="title">
and in my save method (in the child component), I am checking if currentevent is empty or not. If it is empty then I trigger the add code otherwise, I trigger the update code.
Question : This works , but I have a large form and having to do this for each and every component is not a clean design . Can you please let me know what should I be doing ?
I totally appreciate your predicament. The best way to handle form data is to make it create/update agnostic. Here's what I'd recommend you try:
Instead of maintaining all the data fields as disparate properties, contain them in a single object, in this case I'm calling it eventObj for clarity:
data () {
return {
eventObj: {}
}
}
Then in your markup you'd reference them via the object:
<input type="text" placeholder="..." class="form-control" v-model="eventObj.title">
You'd then need to define a prop for passing in the data (as an object) from the parent component if you are editing:
props: {
currentevent: Object
}
And then you'd just need to map the incoming prop to the child component's data:
created() {
Object.assign(this.eventObj, this.currentevent || {})
}
Now when your inputs like <input v-model="eventObj.title"> are processed, if there is a saved title (that was passed in with currentevent) the field will be prepopulated with it, otherwise it will be blank.
I think this should help you in the right direction toward solving the complexity you're trying to figure out. There are other logistical issues involved with this kind of stuff in general, but I won't drone on. :)
The issue I see is you want to remove the v-if/else in the form. I will recommend here is keep your local data of child to be in sync with the props passed and only use local variable in the form.
One way to do this can be put a watcher on props and whenever props changes, update local variables and only use those variables in form.
watch: {
currentevent: function(newVal){
title = newVal.title,\
description = newVal.description
...
}
}
I am using Contact Form 7 in WordPress and have the following field:
<div class="checkbox">[checkbox subscribed default:1 "Send me occasional email updates"]</div>
"Send me occasional email updates" becomes the input label and the value when this option is selected is "Send me occasional email updates".
I want the value to be 0 or 1.
I cannot seem to find a way to do this.
There is an "acceptance" field you can use that does this but it is more for terms & conditions acceptance as it requires the checkbox to be ticked - whereas I am giving the option to opt in/out so I cannot use that.
You can use such shortcodes in the form for checkbox to send value="1":
[checkbox optout use_label_element "Opt-Out of Insights and Communications|1"]
Then to show original value in the mail message you'll need to use:
[_raw_optout]
Works ofr me with latest wp and cf7
I have a very hacky solution. We had the same issue with a subscription checkbox, the entire label was passed through to the email and the user requested a simple yes/no. I used a combination of a hidden field and jQuery to accomplish this.
First, add an additional checkbox with values "yes" and "no" (or whatever you want). Put it in a container that's hidden on your form:
<label class="checkbox-inline">
[checkbox updates id:updates "Please check here to receive updates ...."]
</label>
<div class="checkbox-inline hidden hidden-contact-check">
[checkbox updateshidden default:2 id:updateshidden "yes" "no"]
</div>
Then a bit of javascript that will keep the appropriate checkbox checked in the hidden field:
$(document).ready(function() {
$('#updates.wpcf7-checkbox input').click(function() {
$('#updateshidden.wpcf7-checkbox input[value=yes]').prop('checked', $(this).prop('checked'));
$('#updateshidden.wpcf7-checkbox input[value=no]').prop('checked', $(this).prop('checked') === false);
});
});
Then finally in the Mail tab for CF7 you use the field [updateshidden]
Subscribe: [updateshidden]
This will pass through a yes/no to the email rather than the label you provided.
Not sure about the syntax of contact form 7 of WordPress, but usually this works:
<input id='testName' type='checkbox' checked = 'checked' value='Yes' name='testName'>Send me occacional updates
Let me know if it does not suit your purpose.