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 Pattern Attribute on Textbox

I am trying to use Pattern attribute to do validation on text box.
When ever user entered any of these .....i want to show some validation message.
So i created that element as follows:
<input type="text" pattern="/(<!|&#|<\?|<|>)/" title="Required" required />
When ever i entered any text it is showing the alert...
How to get rid of this?

You were using the wrong pattern. In HTML patterns, you don't need an opening and closing delimiter. Also, the browser checks, if the entered text MATCHES the pattern, but you would need the exact opposite (if I understood it correctly). Try something like this:
<form>
<input type="text" pattern="^((?!(<)|(<!)|(<\?)|(&#)|(>)).)*$" title="Required" required />
<input type="submit" />
</form>

How do you disable input value on web form field / input tag?

How do you disable the autocomplete functionality in the major browsers for a specific input (or form field)?
<input type="text" id="fullname" name="fullname" class="form-control" data-required="true" value="<?php echo $_POST['fullname']?>" >
When I open this form I see the value in this input even if I didn't insert any value.

I think adding autocomplete="off" would get you an error on most browsers, furthermore, autocomplete="off" is an invalid property.
Try to check the Mozilla Developer Documentation instead.

Just use the autocomplete attribute:
<input type="text" autocomplete="off"/>
"This would be useful when a text input is one-off and unique. Like a
CAPTCHA input, one-time use codes, or for when you have built your own
auto-suggest/auto-complete feature and need to turn off the browser
default."
Source : CSS Tricks

You could generate a random string using javasript or php and add it to the end of an input name, maybe even use a delimiter to split it apart from the actual name.
In php, you could use something like the session_id for this and simply echo it to the end of the name.
<input type="text" autocomplete="off" name="example<?php echo "," . session_id()?>">
You can replace the "," with any delimiter of your choice, so long as it isn't alphanumeric. Then when processing the data submitted, you can remove it from the end of the actual name of the input field.
With a field name always being different, your browser cant autocomplete it.
Source: https://stackoverflow.com/a/218453/12251360

Solution 1
<form name="form1" id="form1" method="post"
autocomplete="off" action="http://www.example.com/form.cgi">
This will work in Internet Explorer and Mozilla FireFox, the downside is that it is not XHTML standard.
Solution 2
The solution for Chrome is to add autocomplete="new-password" to the input type password.
Example:
<form name="myForm"" method="post">
<input name="user" type="text" />
<input name="pass" type="password" autocomplete="new-password" />
<input type="submit">
</form>
Chrome always autocomplete the data if it finds a box of type password, just enough to indicate for that box autocomplete = "new-password".
This works well for me.
Note: make sure with F12 that your changes take effect, many times browsers save the page in cache, this gave me a bad impression that it did not work, but the browser did not actually bring the changes.
Solution 3
<input type="text" id="fullname" name="fullname" autocomplete="off" class="form-control" data-required="true" value="<?php echo $_POST['fullname']?>" >
links
Solution 3 Reference : https://stackoverflow.com/a/25496311/6923146
Solution 2 Reference : https://stackoverflow.com/a/40791726/6923146

Matching one or more alphanumeric characters with AngularJS

I have an AngularJS app. Why does the pattern /^[a-zA-Z0-9]+$/ match an empty string?
<form name="addTeamForm" novalidate ng-init="team=''">
<input type="text" name="team" ng-model="team" ng-pattern="/^[a-zA-Z0-9]+$/"/>
</form>
{{ addTeamForm.team.$valid }}
Why the value of $valid is true?
http://jsfiddle.net/NameFILIP/fdsqzf12/5/

You need to also use required or ngRequired:
<input type="text" name="team" ng-model="team"
ng-pattern="/^[a-zA-Z0-9]+$/" required />
The way ngPattern work is to check not empty string to match a pattern. If string is empty it won't be checked and no validation error will arise. By specifying required directive in addition to ngPattern you are making empty string invalid value.
Updated fiddle: http://jsfiddle.net/vittore/fdsqzf12/6/

Is "name" attribute mandatory in <input>, <textarea> and <button> elements?

Is "name" attribute mandatory in <input>, <textarea> and <button> elements? Or maybe we can use id or class instead?

If these tags are inside a form tag and you are subbmitting that
form to a server, then name is required,
If you are just using them for client-side purposes and don't want to send them to server, then it is optional.

Name is not a required attribute. A small quote from the HTML spec:
The name content attribute gives the name of the form control, as used
in form submission and in the form element's elements object. If the
attribute is specified, its value must not be the empty string.
Notice the "if" in the quote, indicating that it is not required, from a standards perspective.
However, if the input is used with the browsers standard form submission, you won't be able to retrieve the value of the input on the server-side, if you don't have a name to refer to.
If you only need to retrieve the value on the client using JavaScript, then you can use an id, a class, or any other means to select the given input - in that case you can leave the name out if desired.

name is what gets sent to php scripts for processing so for example $_POST['Telephone'] when used as <input name="Telephone" type="text">. Not required unless being used for processing really.

No its not, but generally you would want it.
Try this
<?php
foreach($_GET AS $key=>$val)
{
echo "name '$key' has value '$val'<br>";
}
?>
<form>
<input type="text" name="abc">
<input type="text" id="a">
<input type="text" class="b">
<input type="text">
<input type="submit">
</form>