Develop Reference

insert attributes dynamically in html elements in angular

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>

How to use ng-messages with such a input like <input name='user[name]'>

I am new to Angular, and try to use ng-messages to do something like form-validate. Now, I have no problem when I use ng-message in the following situation:
<form name='loginForm' novalidate>
<input name='user' required>
<div ng-messages=loginForm.user.$error>
<div ng-message='required'> this field is required...</div>
</div>
<form>
but when I change name attribute of input,<input name='user[name]' required>, ng-message would not work again. Is there anyone can help me?

Form name attributes CAN be populated dynamically.
Remember, name attribute reads a string, and ng-messages reads an angular expression that should be evaluated to a reference to the $error object.
Since this reference is obtained through an angular expression, it can even be a method that returns the reference.
In your case, assuming your name attribute looks like this:
<form name="loginForm">
<input name="{{ user.name }}" required />
</form>
The correct syntax should be:
<div ng-messages="loginForm[user.name].$error" ></ div>

Add a prefix/suffix to value of input tag

I have this situation: I need to add quotes inside an input text field (html) without changing the value of the input. I'm working with angular so I use ngModel, it looks like this
<input ng-model="data" type="text" />
I want the input field to show "whatever is in {{data}}" but the variable data itself remains unchanged (no quotes).
I haven't found any css/Angular tricks yet... any ideas?

Using ng-model="data" in <input type="text"> binds the data with entire text field. This is not particularly useful in situations where you want only a portion of text(being displayed in text field) to get bind with the scope.
For instance, if you do
<input type="text" value="prefixText {{name}} suffixText" ng-model="name">
The input box will display whatever is in name(with no prefix/suffix text)
However, there's a workaround. Use ng-bind on the variable and mention prefix/suffix text separately in the value="..." attribute.
<input type="text" value="prefixText {{name}} suffixText" ng-bind="name">
Here's the demo

You can try this
<form class="example-form">
<mat-form-field class="example-full-width">
<mat-label>Telephone</mat-label>
<span matPrefix>+1 </span>
<input type="tel" matInput placeholder="555-555-1234">
<mat-icon matSuffix>mode_edit</mat-icon>
</mat-form-field>
</form>
Demo

Copy input field from one to another?

UPDATE: I got in contact with the developer and he said to use this code as a foundation:
(function($) {
$('.jr-page').on('keyup','.jrAutoSuggest',function(){
$(".customfield").val($(this).val());
});
})(jQuery);
It doesn't work at the moment and I'm not sure why but you can also see my original post below this text for more details and I appreciate all of your help:
I am trying to copy one input field to another when a user types. I would like to accomplish something like this: http://jsfiddle.net/bxHQ5/ Notice that when you type into the input box on the left, it duplicates the text on the right.
To be more specific, on my website, I am using this form
I want what the user types in the "Car Manufacturer" input box to directly be copied to the "Testfield" input box as they type. Also, the "Testfield" input box text cannot be deleted or altered by the user once text is inputted in the car manufacturer field. They both have to be exactly the same.
Please note that the car manufacturer input field shows a hidden input which the user cannot see and should be ignored in this case. If you look at the HTML, the car manufacturer input looks like this:
<input id="myrelatedfield" class="jrAutoSuggest ui-autocomplete-input acInstructions" type="text" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"></input>
You'll notice I put my own customer ID in there called "myrelatedfield" The field it needs to copy text to looks like this which has a custom class "jr_testfield"...
<input class="jr_testfield jrText" type="text" data-click2add="0" name="data[Field][Listing][jr_testfield]"></input>
Thanks!

I ave updated the code
have a look at it
http://jsfiddle.net/vishalgupta358/bxHQ5/383/
$("#EmailAddress").keyup(function(){
$("#Username").val($(this).val());
});

Use readonly="true" property to prevent write access.Input value will also be available when u submit the form
HTML:
<input type="text"id="EmailAddress" name="EmailAddress" value="" >
<input type="text" id="Username" readonly="true" name="Username" value="">
Script:
$("#EmailAddress").keyup(function(){
$("#Username").val($(this).val());
});
DEMO

Get form value from Sonata Admin

I would like get value from form of Sonata Admin, but in source html i have for example:
<input type="text" class="span5" maxlength="255" required="required" name="s215268450cfc7[username]" id="s215268450cfc7_username">
s215268450cfc7 this is uniqid, but for what this is add to all fields in form? This is regenerate after refresh page.
I would like get value from this form, but i can't use:
$('#s215268450cfc7_username').val()
because this is still renames.

You can parse uniqId from the <form> element, or you can use:
$('form [id$="_username"]').val()
Also, from Twig template, you can access name something like this (depending on whether you have access to the whole form, or only to the username field):
{{ form.children.username.vars.name }}