Develop Reference

How to Replace All __prefix__ Placeholder Strings within Django Formsets empty_form Elements Using Only Javascript?

Django formsets have an empty_form attribute.
empty_form
BaseFormSet provides an additional attribute empty_form
which returns a form instance with a prefix of __prefix__ for easier
use in dynamic forms with JavaScript.
The Django documentation doesn't actually say how to replace the __prefix__ with Javascript. Several online examples show how to do it with jQuery, but I specifically want to do it with Javascript - no jQuery.
Here is the resulting HTML from my {{ formset.empty_form }}:
<div id="prerequisiteEmptyForm">
<input type="text" name="prerequisites-__prefix__-text" maxlength="100" id="id-prerequisites-__prefix__-text">
<label for="id-prerequisites-__prefix__-DELETE">Delete:</label>
<input type="checkbox" name="prerequisites-__prefix__-DELETE" id="id-prerequisites-__prefix__-DELETE">
<input type="hidden" name="prerequisites-__prefix__-id" id="id-prerequisites-__prefix__-id">
<input type="hidden" name="prerequisites-__prefix__-content" value="21" id="id-prerequisites-__prefix__-content">
</div>
Everywhere it shows __prefix__, I want to replace it with a number... let's say 321.
Correct solution:
<div id="prerequisiteEmptyForm">
<input type="text" name="prerequisites-321-text" maxlength="100" id="id-prerequisites-321-text">
<label for="id-prerequisites-321-DELETE">Delete:</label>
<input type="checkbox" name="prerequisites-321-DELETE" id="id-prerequisites-321-DELETE">
<input type="hidden" name="prerequisites-321-id" id="id-prerequisites-321-id">
<input type="hidden" name="prerequisites-321-content" value="21" id="id-prerequisites-321-content">
</div>
So my question becomes
Using Javascript only, how do I replace a constant value ("__prefix__") with something else ("321") across several elements (inputs and labels) within multiple attributes (name, id)? Specifically, I want to do it cleanly for repeatability. I don't want a highly custom solution to this specific problem. It needs to be a general approach... since this is replacing a constant, surely Javascript has a clean way to do this? I'm still learning Javascript and trying to not be so dependent on jQuery.

I used this concept:
const emptyForm = document.querySelector('#prerequisiteEmptyForm');
clone = emptyForm.cloneNode(deep=true);
clone.innerHTML = clone.innerHTML.replace(/__prefix__/g, '321');

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>

Angular text ng-minlength when NOT empty?

Is it possible to force ng-minlength to be a conditional value? For example, I want a user to either enter their proper middle name or nothing at all:
<input type="text" id="middleName" name="middleName"
ng-model="info.middleName"
ng-minlength="info.middleName ? 2 : 0">
The syntax above does not work. An 'infinite loop' error is thrown.

Try this:
<input type="text" id="middleName" name="middleName"
ng-model="info.middleName"
ng-pattern="/^(?:.{2,})$/">
This uses a regular expression to do the same. The 2 is the minimum length. After the comma is the maximum length (infinite, since there isn't anything).

ng-minlength only takes in static values. If you are looking for a custom solution, try creating your own directive using the $observe. Therefore, to answer you question, no it is not possible to force ng-minlength to be a conditional value.

Try something like this. This is also more readable
<input type="text" id="middleName" name="middleName"
ng-model="info.middleName"
ng-minlength="getMinLength(info.middleName)">
In the javascript file:
$scope.getMinLength = function getMinLength(dataModel) {
//whatever your model is...
return dataModel ? 2 : 0;
}

Angularjs directive and string.format

I have a JSON like this
{textTemplate:"Name：{0}，Phone：{1}",controls:[{id:1,Name:"Name",type:"text"},{id:2,Name:"Phone",type:"text"}]}
I have no idea how to use the directive to replace string to html control
My Expect :
Name : <input type='text' name='Name' /> Phone : <input type='text' Name='Phone' />

You need to create a directive who wraps an input something like:
<div my-directive-input name="model.Name" phone="model.Phone"></div>
The template should be the one you presented here.
The directive should replace the div with the new template.
You should download the data from your server and bind it to your model(in this example it's straight on your model - but this can change due to your demands.

GetElementsByName with array like name

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