How can I disable a Form.Item in antd v.4? - antd

In ANTD v.4, it seems there is no way to disable a specific field in a form.
I think I can only disable all fields in the form, like in this example.
https://4x.ant.design/components/form/#components-form-demo-disabled
I tried to set the "disabled" attribute to the Form.Item using the code below, but it did not work.
<Form.Item disabled name="fldLoginID">
<Input />
</Form.Item>
Is there any way to disable a specific field?

The only way is to set the "disabled" attribute to the input tag.
Like the code below
<Form.Item name="fldLoginID">
<Input disabled={true} />
</Form.Item>

Related

Render field as read only using the Grails Fields Plugin

Using the Fields plugin:
<f:field bean="operator" property="defaultPaymentMethod"/>
Renders nicely with a label "Default Payment Method" and input box.
How can I (what is the best way) show the field and not allow the user to change the value?
f:display only shows the value, with no label.
I tried writing a wrapper like this:
<div class="fieldcontain required"><label for="${property}">
<g:message
code="${entityName}.${property}.label"
default="${property}"/>
<span class="required-indicator">*</span>
</label><g:field type="text"
name="${property}"
readonly="readonly"
value="${value}"/>
</div>
but that didn't come out with the nice label formatting.
Is there a way to make a field read only with the Grails Fields plugin?
Use f:display to show only the value:
<f:display bean="operator" property="defaultPaymentMethod"/>
If you still want to keep the look of an input-field, you can use the attribute: disabled="true" in the f:field tag.
EDIT:
"disabled="true" in the f:field tag" is not working

How to add specific attribute (like "multiple") to Thymeleaf templates?

I have this:
<input id="fileupload" type="file" name="files[]" data-url="rest/controller/upload" multiple>
and I need to make it work in a Thymeleaf template. I have the data-url part figured out but I keep getting an error on the word "multiple". This is needed to allow multiple selection in the file selection window.
I have looked everywhere and have not come across an answer.
EDIT:
If you are not familiar, here is the "multiple" attribute.
http://www.w3schools.com/tags/att_input_multiple.asp
The Standard Dialect of Thymeleaf includes attributes that allow you to set these attributes by evaluating a condition, so that if evaluated to true, the attribute will be set to its fixed value, and if evaluated to false, the attribute will not be set:
e.g for checkedattribute:
<input type="checkbox" name="active" th:checked="${user.active}" />
you have to use:
th:multiple
e.g
<input id="fileupload" type="file" name="files[]" th:multiple="{condition}">
see a tutorial here.

Input type='image' as submit button behaves differently than 'submit'

I have multiple buttons submitting a form. I check to see which button was clicked by the input value that gets passed into my controller.
public async Task<ActionResult> MyAction(MyModel model, string command)
The html below works. In my controller command equals myValue
<input type="submit" name="command" value="myValue" />
The html below doesn't work. In my controller command is null
<input type="image" name="command" src="..." value="myValue"/>
W3C says the type 'image' is a submit button
So why are these two input elements behaving differently?
An image submit button indeed behaves differently, by definition, both according to the expired working draft linked to in the question and the current HTML5 CR draft and the HTML 4.01 recommendation. According to HTML5 CR, construction of the form data set does not add a name=value pair for an image submit button but name.x=... and name.y=... with the coordinates of the clicked location as values. This corresponds to old definitions and browser practice, except that Chrome additionally adds a name=value pair.
Thus, in your case, the form data will contain the fields command.x and command.y, with values that you are probably not interested in. This is what you need to take as starting point when coding the form handler. This means that if you need to recognize which of several image buttons was used, you need to give them different name attributes.
You can have one hidden field and set the command name in that hidden field which ever button is click and get the name of the button that submited the form on server side.
Javascript
$(".submit").click(function(){
var commandName = $(this).attr("val");
$("input[type=hidden]").val(commandName);
});
HTML
<form>
<input type="hidden" name="command">
<input type="submit" value="submitbtn" class="submit" />
<input type="image" src="..." value="imagebtn" class="submit"/>
</form>
The simplest (and maybe not safe) way to accomplish this task is with inline JQuery, here's how :
VIEW :
<input type="image" src="..." onclick="$('#hidImgValue').val('Image1');" />
<input type="hidden" id="hidImgValue" name="command" value="none" />
CONTROLLER :
public async Task<ActionResult> MyAction(MyModel model, string command)
Command var will have "Image1" as value.

JQuery Mobile - Put a data-icon in addition to the checkbox in an input checkbox

I would like to put a nice little data-icon="star" on some chekbox labels of a group of checkboxes. Is there a way to do so using jQuery data-icon or should I just do it directly in the CSS (in which case how do I get the same rendering as the one of data-icon?).
In a dream world, here is what would work:
<div data-role='fieldcontain' data-mini='true'>
<fieldset data-role='controlgroup'>
<input type='checkbox' name='cb1' id='cb1' />
<label for='cb1' data-icon='star'>special</label>
<input type='checkbox' name='cb2' id='cb2' />
<label for='cb2'>normal</label>
</fieldset></div>
Thanks a lot for your help
You would have to use your own custom CSS or JS to do this, data-icon only works with a tags per the documentation: http://jquerymobile.com/test/docs/buttons/buttons-icons.html
This is even more tricky because the icon's are entered as styled spans which is exactly how the jqm checkbox is rendered - they both use the ui-icon for some base styling and positioning.
If you tried to use a jquery function to append it after the jqm styling has worked its magic like so: http://jsfiddle.net/shanabus/zt7cP/1/ - but again, the styling conflicts with the actual checkbox, but the functionality of the checkbox is still there.
Hope this gets you going in the right direction.
I am not sure if this is only available in the latest jQuery mobile (1.4.5) but you can just add ui-icon via the "class" attribute. So for this example it would look like this:
<div data-role='fieldcontain' data-mini='true'>
<fieldset data-role='controlgroup'>
<input type='checkbox' name='cb1' id='cb1' />
<label for='cb1' class='ui-icon-star'>special</label>
<input type='checkbox' name='cb2' id='cb2' />
<label for='cb2'>normal</label>
</fieldset></div>

Changing keyboard type for html textarea on iPad

I'm writing a web application for iPad.
I know it's possible to change the type of keyboard displayed when an html input field is selected using:
Text: <input type="text" />
Telephone: <input type="tel" />
URL: <input type="url" />
Email: <input type="email" />
Zip Code: <input type="text" pattern="[0-9]*" />
the problem is that I have to use textarea instead of input. Is it possible to obtain the same result?
If not : is there any way to change the keyboard label for the ENTER key. At the moment the default label is "Return" and I would like to have "Send" (since it's a chat app).
thanks a lot!
If it is plain html/css/javascript. This is not possible
if you use <input title="Search"> the "enter" key is replaced by a "search" button, I haven't been able to find a listing of all the different combinations, but I'm sure there is one to you liking.
Note: The input must be inside a form element for this to work.

Resources