I have a textbox, I want to make in readonly at some conditions and editable field in few conditions, So the field should toggle between read only/editable based on the condition , How to achieve this ?
You need to use the following (Angular 4):
<input [readonly]="isReadOnly">
If you use attr.readonly then the input will always be read-only because the readonly attribute will be present even if its value is false. By using [readonly] Angular will only place the attribute if isReadOnly is true.
After, you assign the value as you wish:
// when you want to be read-only
isReadOnly = true;
// whe you want to be editable
isReadOnly = false;
Use this: [readonly]="varInYourComponent" in your input field, on template.
And in your component declare and you should work with this variable:
boolean varInYourComponent
use property binding to achieve that
[property]="flag"
Related
I am trying make a conditional select-box. There are 2 select-boxes. When select-box1 1's value changes then the 2nd select-box value automatically need to get selected to a value and it will also be disabled.
So far , i am able to do the conditional select where select-box 1's option changes value in select-box2 but it shows error in vue.
Error is--
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"
Also , i can disable the 2nd select-box but when i use dynamic disabled the value doesn't get set.
Question in brief:
1st selectbox has value-- a)one time payment & b)subscription and
2nd selectbox has value--a)held & b) Immediate.
Now, if 1st selectbox's subscription is selected then in the 2nd selectbox, it should be set to immediate and also get disabled.
Below is the Code Sandbox link--
https://codesandbox.io/s/conditional-select-forked-h61po?file=/src/components/HelloWorld.vue
If there is a better way of achieving this, then feel free to share ...
You don't need a ref, you can change the value of selected2 directly because it's not a prop, but a data field. Remove the reference in your component, like so:
<b-form-select
v-model="selected2"
:options="options2"
:disabled="isDisabled"
></b-form-select>
and change your onChange method to this (you don't need the else block as well):
onChange(event) {
if (event === "subscription") {
this.selected2 = "Immediate";
this.isDisabled = true;
}
},
Try it. I've tested it and it works.
I think the best way is to watch the 2-way-binding (selected) with a watcher.
See: https://v3.vuejs.org/guide/reactivity-computed-watchers.html#watch
And if the value changes you can check if the new value is 'subscription'.
And to select the wante option in the 2nd select you just have to asign the wanted value to the 2-way-binding (selected2). And for disabling set isDisabled to true.
I'm trying to create a password textfield and I want the user to enter at least 8 characters. I really like the way the visible maxLength character counter on textfields work when a maxlength is set, and I was wondering if there is any equivalent for a minimum length. Thanks!
You have to use TextFormField instead of TextField.
Check this SO post:
For Text Field Validation use TextFormField instead of TextField.
TextFormField needs to be wrapped with Form widget (If there are
two ore more textformfields you can wrap their parent widget with form
widget).Form widget requires key and autovalidate boolean (it's
optional but it's recommended to show message to user when they
haven't validated and as soon as they validate message stops showing).
We create two variables and assign it to Form.Then we need a
validator in which we validate according to our requirements.(If you need to add more validations you can add multiple if
conditions.).Finally on field submitted we check if user has validated
the form if validated we perform our desired action else we set
autovalidate variable to true to perform autovalidation.
E.g.
TextFormField(
...
validator: (String value) {
return value.length < 8 ? 'Minimum character length is 8' : null;
}
)
I need to do a shortif in a v-model, but eslint gives the folowing problem:
[vue/valid-v-model] 'v-model' directives require the attribute value
which is valid as LHS.eslint-plugin-vue
so the code works. but its not the way it needs to work.
this is the code i have now
<v-text-field
v-show="field.type == 'String'"
v-model="_isMultiple(content_data[tabindex]) && subitem != null ? content_data[tabindex][subitem][field.name]
: content_data[tabindex][field.name]"
:label="field.name"
:counter="field.counter"
max-width="100px"
/>
So this code needs a little explanation to it.
I try to build this as an dynamic module. If I get an array back from my json response it needs to v-model the subitem. If I get an object back from the response it just needs to v-model that object.
The data (content_data[tabindex]) + field do i get from a v-for loop and other loops in my vue html
so I think its not an option to do a computed prop because
I can't get in the right data.
_isMultiple function code:
_isMultiple(content_data) {
return Array.isArray(content_data)
}
any solution for this?
Maybe you should not use v-model, but build it on your own with value binding and event listening.
v-model is only a shorthand: https://v2.vuejs.org/v2/guide/forms.html.
By implementing it on your own you can use a method to set the values and a computed property to get it.
I have an hidden input field which value changes according to the option selected in a s:select in Struts 2. Then, there's a button that points to an action like loadData.action.
I would like to add to this action a parameter named item.id with the value of the hidden field as its value, a value changing each time I select a new option.
I've tried to use an s:param with an s:property inside and the name or the id of the s:hidden, but it doesn't print the value after the = sign.
How can I do to achieve this result? loadData.action?item.id=12 where 12 is the value of s:hidden name="item" id="item" ?
Please Provide complete action link and which value to be change also your HTML structure, so it will be easy to answer your question
Assuming your HTML structure's elements, I have tried to answer your question
You can change action using jQuery on change event of your <s:select>
Have a look at https://jsfiddle.net/shantaram/qy9rew4v/
$('#id-select').change( function () {
var newAction = $('#id-form').prop('action');
newAction = newAction.substring(0, newAction.lastIndexOf('='));
$('#id-form').prop('action', newAction+"="+varItemId);
//varItemId is value of your hidden field
//which you want to change Dynamically
});
provided:
id-select -> Id of your <select> element
id-form -> Id of your <form> element
How to disable the inArray validator of Zend\Element\Select ?
I can not remove this standard validator select element.
Edit:
What I'm trying to do is populate a select element so dynamic with ajax. So that way the inArray loses the reference field value.
Does anyone know what is the right way to populate this element with ajax?
It actually does not look like it is possible at this point in time to disable the validator; however, you can override the select element to be able to remove the validator for this specific case:
use Zend\Form\Element\Select;
class MySelect extends Select {
public function getValidator() {
return $this->validator;
}
}
Basically the key issue with the current select element is that if the validator does not exist; it will create it. The other option you have here is to set a validator manually; which you should likely be doing is manually creating an InArrayValidator and populating it with the potential options that would be coming from your AJAX call. In which case you would need to add a setter above.
Since version 2.2, Zend Framework provide the ability to disable inArray validator calling:
$element->setDisableInArrayValidator(false);
or passing option to an element:
'disable_inarray_validator' => false