I have to insert a set of attributes to my a component I want to re use...
now different attributes will come as string to me...
say for example I want to insert an element in my component
<input type="text" maxlength="10" placeholder="enter your name"/>
then i will get all the attributes as a single string
attr = 'type="text" maxlength="10" placeholder="enter your name"'
in the controller for my component...
and i have to insert that to my conponent in the html...
i have tried
<input {{attr}}/>
and
<input {{jQuery.parseHtml(attr)}}
etc..
but it is not working... also, could not find any solutions...
please share any solutions or some links/references helpful for me...
You can use #Input properties to pass data to a nested reusable component. However, AFAIK there isn't an easy way to pass a string of html attributes and apply them automatically. You'd either need to pass them on individual input properties or write code to process the string yourself and map them into attributes for binding.
Use binding for each attribute you want to change dynamically
Component:
typeTxt: string = "text";
maxLengthNum: number = 10;
placeholderString: string ="enter your name";
Html:
<input [type]="typeTxt" [maxlength]="maxLengthNum" [placeholder]="placeholderString"/>
See the documentation to better understand data binding and deal with the different attribute types (Properties, events, two-way, etc.)
Use the parent tag to dynamically change your template
Component:
htmlString: string = '<input type="text" maxlength="10" placeholder="enter your name"/>';
Html:
<div [innerHTML]="htmlString"></div>
Result:
<div>
<input type="text" maxlength="10" placeholder="enter your name"/>
</div>
Related
I have a vue component that shows a form populated with items from a selected item to edit. Now I don't want to have to use a second form for creating a new item. At the moment I auto populate and update the item with v-model which obviously updates the object. Am I not able to use conditional operators in this like so?
<form #submit.prevent>
<div class="field">
<label class="label">Job Title</label>
<p class="control">
<input type="text" class="input" placeholder="Job title" v-model="experiences[editIndex].title ? experiences[editIndex].title : ''" />
</p>
</div>
</form>
You can use conditional operators with v-model, but you can't give v-model a string like you're attempting in your example.
I wouldn't use the same form for editing and creating (might be preference). I would make the form its own component and then make two additional form components for editing and creating.
However, if you really want to handle the logic in each input's v-model directive, you would need to give it a variable in the last part of the ternary operator. Something like this:
v-model="experiences[i].title ? experiences[i].title : newExperience.title"
If you use eslint-plugin-vue it will complain about ternary in v-model.
ESLint: 'v-model' directives require the attribute value which is
valid as LHS. (vue/valid-v-model)
So I'd rather explicitly use a pair of :value and #input props.
Like that:
<input
type="text"
class="input"
placeholder="Job title"
:value="experiences[editIndex].title ? experiences[editIndex].title : ''"
#input="experiences[editIndex].title = $event.target.value"
/>
Also, you can use some function for #input, which will check property existence and add it if necessary.
Below is an example of Bootstrap Code to create a input-group. How can I use jQuery to set the contents of the input-group using the id?
<div class = "container">
<div class = "input-group-addon">Your name</span>
<input type="text" class="form-control" id="inputField" placeholder="Full Name">
</div><br>
Also, is there a way I can make the input-group not editable. I want to use it to display read-only text.
$("inputField").???? <-- What goes here??
Thanks!!
$("#inputField").attr('readonly',true).val('myValue')
if you have access to the html put directly readonly="readonly" as attribute of input.
you can put value directly in HTML with the value attribute.
ps: dont forget the "#"
$('#inputField').val('the value');
I'm having difficulties prefilling a form using it's Labels in front of the formfields.
The ID's of my formfiels are randomly generated, so also the for="fieldID" for the labels.
An example:
<td>
<label class="required" for="ebc2566ad1c3793b">
name:
<font class="error">*</font>
</label>
<span>
<input id="_ebc2566ad1c3793b" class="form-control" type="text" value="" name="ebc2566ad1c3793b" placeholder="" maxlength="30" size="16">
</span>
</td>
I'm able to use javascript to fill the fields using the ID from the URL, but not using the identifier "name:" which is between the label.
As I'm also using jQuery in soem scripts I'm also not sure which DOM to use.
Examples are very welcome.
I'm not sure I understand the problem 100%, you want to access form labels based on its content yes? If so:
Using the :contains() selector you can grab the form labels like this:
var nameLabel = $("label:contains('name:')");
From there you could use the .next() method to grab the sibling element which in this case will be the span containing the input field. So to access the input you would do something like this:
var nameInput = nameLabel.next().find('input');
From there use .val() to set its content like so:
nameInput.val('John doe')
I have two form fields - an employee count and a gross payroll amount.
<div ng-repeat="payroll in report.payrolls">
<input type="number" min="0" class="input-mini" sister-value="{{payroll.grossPayrollAmount}}" ng-model="payroll.employeeCount" type="text">
<input ng-blur="payroll.grossPayrollAmount = Math.round(payroll.grossPayrollAmount)" type="number" min="0" class="input-small" ng-model="payroll.grossPayrollAmount" type="text">
</div>
The user does not have to enter a non-zero value for either. HOWEVER, if they enter a non-zero value for one then they must do so for the other, and that is what I want to validate against.
These fields repeat in sets - so a pair for each payroll, so I'm not sure if getting them by an ID or class will work.
I've written a few custom validation directives before, but never one that checks for a value in another, related field.
You could try to make a directive surrounding both inputs:
<directive>
<input type="number" min="0" ng-model="payroll.employeeCount" type="text">
<input ng-blur="payroll.grossPayrollAmount = Math.round(payroll.grossPayrollAmount)" type="number" min="0" class="input-small" ng-model="payroll.grossPayrollAmount" type="text">
</directive>
So both values will be available from it, you can access them with element.find().
You use element.find() just like you would use jQuery. For example, setting an id="employeeCount" to the first input, you can access it with element.find('#employeeCount'), so you get the first input element, finally you access to its value with element.find('#employeeCount').val().
note: if you're not used to jQuery, remember to add the dot (.) before a class name and a hash (#) before an id name.
Here, you have a list of methods that you can use with any element, including "find()": https://docs.angularjs.org/api/ng/function/angular.element
Update:
This will also work for multiple pairs of inputs, you just have to repeat the directive tag, for example:
<directive>
<input [...] >
<input [...] >
</directive>
<directive>
<input [...] >
<input [...] >
</directive>
The directive will work independently for each instance you create.
i often use this notation when i name my controls in order to get an array in POST or GET.
<input name="color[1]" type="text" />
<input name="color[2]" type="text" />
<input name="color[3]" type="text" />
so in my scripts i can do
<?php $data=$_GET["color"];
for each ($color as $key=>$value) {
doSomething();
} ?>
Often happens that i need to get those id back in javascript , but i cannot get them , so i often add an ID to each element in html like that
<input name="color[3]" id="color_3" type="text" />
so that i can use document.getElementsById('color_3')
Instead i would like to find way to use document.getElementsByName(color[3])...
but i cannot really get it to work.
Any help?
If you want all of the color inputs, you can use querySelectorAll instead to query for the name attribute:
document.querySelectorAll("input[name^='color[']")
This looks through the document for all input tags whose name attribute starts with color[. Here is a fiddle for this.
If you only want color[3], you can use:
var color3 = document.getElementsByName("color[3]");
console.log(color3[0]);
<input name="color[3]" id="color_3" type="text" />
var element = document.getElementsByName("color[3]");
alert(element[0].id);
It works fine .. The thing you should have in your mind is Return type is an array of elements not a single element