For example I want to generate html file with the form. I want to pass (e.g. in command line) name of fields and type (like text, select, checkbox) and I want to get file with generated form.
For example - command line configuration:
Pass field name:
firstname
Type:
text
Pass next field name:
surname
Type:
text
Pass next field name:
gender
Type:
select
Output file:
<form>
<label for="name">name</label>
<input type="text" name="name" id="name"><br>
<label for="surname">surname</label>
<input type="text" name="surname" id="surname"><br>
<label for="gender">gender</label>
<select name="geneder" id="gender">
<option value="example">example</option>
</select>
</form>
Or maybe there is another tool that can do this.
Related
view screen I am using https://amp.dev/documentation/components/amp-autocomplete/ and I am able show in results id and name concated in one string, but I need show only name and store id in hidden input.
code screen
<amp-autocomplete filter="substring" filter-value="name" min-characters="2" src="/ajax/get_active_clinics.php" class="name_autocomplete">
<input type="text" placeholder="Numele clinicii" name="clinic_name" id="clinic_name"
{literal}on="change:AMP.setState({clinic_name_validation: true, form_message_validation:true})"{/literal}>
<span class="hide"
[class]="formResponse.clinic_name && !clinic_name_validation ? 'show input_validation_error' : 'hide'">Clinica este obligatorie</span>
<template type="amp-mustache" id="amp-template-custom">
{literal}
<div class="city-item" data-value="ID - {{id}}, {{name}}">
<div class="autocomplete-results-item-holder">
<div class="autocomplete-results-item-img">
<amp-img src="{{link}}" alt="{{name}}" width="40" height="40"></amp-img>
</div>
<div class="autocomplete-results-item-text">{{name}}</div>
</div>
</div>
{/literal}
</template>
</amp-autocomplete>
You can use the select event on amp-autocomplete to get the event.value which will return the value of the data-value attribute of the selected item.
https://amp.dev/documentation/components/amp-autocomplete/#events
You can then call the split() string method on the result.
You'll need to modify the data-value in your mustache template like so:
<div class="city-item" data-value="{{id}},{{name}}">
Then add the following code to your autocomplete, this will assign the split values to 2 temporary state properties.
<amp-autocomplete
...
on="select: AMP.setState({
clinicName: event.value.split(',')[0],
clinicId: event.value.split(',')[1]
})"
>
Once these values are in state you can then access them using bound values. Note the [value] attribute, this will update the inputs value when state changes. It's worth mentioning that the change in value won't trigger the change event listener on your input here as it's only triggered on user interaction.
<input
type="text"
placeholder="Numele clinicii"
name="clinic_name"
id="clinic_name"
[value]="clinicName"
on="change:AMP.setState({
clinic_name_validation: true,
form_message_validation:true
})"
/>
Last thing you'll need to do is add the hidden input for Clinic ID, again this will need to be bound to the temporary state property clinicId.
<input
type="hidden"
name="clinic_id"
[value]="clinicId"
>
Say I have the following formGroup structure:
userGroup = {
name,
surname,
address: {
firstLine,
secondLine
}
}
This forces me to write HTML similar to the following:
<form [formGroup]="userGroup">
<input formControlName="name">
<input formControlName="surname">
<div formGroupName="address">
<input formControlName="firstLine">
<input formControlName="secondLine">
</div>
</form>
Let's say, just for the sake of the example, that you are constrained to write HTML that looks like this:
<form [formGroup]="userGroup">
<input formControlName="name">
<input formControlName="surname">
<div formGroupName="address">
<input formControlName="firstLine">
</div>
<hr>
<div formGroupName="someOtherGroup">
<input id="problemSecondLine" formControlName="???.secondLine">
</div>
</form>
Is there a way, to force the field with id=problemSecondLine to be under userGroup -> address -> secondLine, even though, visually, I have no option but to place it under this particular DIV?
I guess I can manually update via ngModel - but I'm trying to find the cleanest way possible.
You can use formControl directive instead of formControlName
<input id="problemSecondLine" [formControl]="userGroup.get('address.secondLine')">
Plunker Example
I have a form to edit instances of a model (modelName). The model has a description field which is a string. The form is set up like this:
<label class="form-group">
<span class="control-label col-md-3">Description</span>
<span class="col-md-9">
<input class="form-control" type="text" name="description" [(ngModel)]="modelName.description" required />
</span>
</label>
And when the edit form is opened using an instance of the model that has a defined description, the form populates with "false" instead of the description. If I add
{{modelName.description}}
to the label attached to the description input, it prints the string as expected.
I would like the form input to populate with the description string instead of "false"?
I have multiple fieldsets containing radiobuttons and an input box on a page. I was given this app to maintain and currently the data is saved by iterating over a Scope.Params parameter, picking out each value, using params.get() and passing them along to a method to save.
What is a good way to execute this? Will I always have to use a Scope.Params parameter? I know one can parameterize the values of the input fields of the form in the action that is called upon submit. How do I do it for a fieldset?
Thanks.
In controllers you can automatically get parameters if you have in your method signature.
Let's say you have a from createUser.html calls a POST method in your template. It is in UserController and createUser.
In form you have:
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
<input type="radio" name="gender" value="male" /> Male<br />
<input type="radio" name="gender" value="female" /> Female
so in you controller if you have a method like this:
pulic statid void createUser(String firstname, String lastname, int gender) {
User user = new User(firstname, lastname, gender);
...
}
So you don't necessarily need to get parameters separately.
EDIT -> In order to save multi-fields for same for you could use arrays like:
in form you could have: <input type="text" name="firstname[]" />
in controller:
pulic statid void createUser(String[] firstname ...) {
for (int i=0; i<firstname.length; i++) {
...
}
...
}
I am trying to output four hidden inputs based upon the user's selection in a dropdown box.
<label>Neighborhood:</label>
<select id="district">
<option value="">- Select -</option>
<option value="warehouse">Warehouse District</option>
<option value="gateway">Gateway District</option>
<option value="tremont">Tremont</option>
<option value="shoreway">Detroit Shoreway</option>
</select>
For instance, if the user selects warehouse district, these hidden inputs are added to the form.
<input type="hidden" name="idx-q-LatitudeMax" value="41.50534740463771" />
<input type="hidden" name="idx-q-LatitudeMin" value="41.49729607499309" />
<input type="hidden" name="idx-q-LongitudeMin" value="-81.70605182647705" />
<input type="hidden" name="idx-q-LongitudeMax" value="-81.69352054595947" />
I've found some solutions to deal with changing a single value, but I need to output all four .
Any help would be greatly appreciated
"type property cannot be changed(IE Security Model)."
See this change type of input field with jQuery
Alternatively you can do this
Add a class to your input like this
<input class="hidden warhouse" name="idx-q-LatitudeMax" value="41.50534740463771"/>
<input class="hidden warhouse" name="idx-q-LatitudeMin" value="41.49729607499309" />
<input class="hidden warhouse" name="idx-q-LongitudeMin" value="-81.70605182647705" />
<input class="hidden warhouse" name="idx-q-LongitudeMax" value="-81.69352054595947" />
hidden css class has "display:none"
on change first hide all and then display the one you want
$('#district').change(function(){
$('input.hidden').hide()
if($(this).val() == "warehouse"){
$("input.warehouse").show()
}
})