How to dynamically add waypoints in Angular along with auto complete address? - javascript

<div [hidden]="!showWaypoint" #waypoint>
<div class="form-group label-floating">
<label class="control-label">Waypoint</label>
<input type="text" class="form-control search-address" name = "waypoint" placeholder=" " [(ngModel)]="wayPointInput" #stop>
</div>
</div>
I want to clone this entire portion, just like appending when i am clicking on add waypoint. I Dont want to use structural directives like *ngFor.
I have also consoled this
#ViewChild('waypoint') wp;
console.log(this.wp.nativeElement);
but I dont know how to append it along with the change in ngModel name so that after submitting I get a set of data in an array.

Related

Found 2 elements with non-unique id

I am getting the following warnings when we use with the same id names in two different form tags.
[DOM] Found 2 elements with non-unique id
Here is my HTML snippet:
<div class="modal-dialog">
<form action="" method="post" id="myid-1" name="myid-1">
<input type="text" class="form-control" id="Job_Name" name="Job_Name" required="">
<label for="Job_Name">Job Name<span class="text-danger">*</span></label>
<button type="submit">Submit</button>
</form>
</div>
<div class="modal-dialog">
<form action="" method="post" id="myid-2" name="myid-2">
<input type="text" class="form-control" id="Job_Name" name="Job_Name" required="">
<label for="Job_Name">Job Name<span class="text-danger">*</span></label>
<button type="submit">Submit</button>
</form>
</div>
How do I resolve "Found 2 elements with non-unique id" warnings?
you need to change id="Job_Name" to be unique e.g. id="Job_Name1" id="Job_Name2" etc. as ID must be unique in the DOM.
It will create conflict when you want to select elements using document.getElementById('Job_Name') or using jQuery $('#Job_Name') as you wont be able to get the second or other elements with same id. you will need to use index and querySelectorAll which will then defeat the purpose of using Id at first place.
<input type="text" class="form-control" id="Job_Name" name="Job_Name" required="" >
Duplicate input tag in two different forms
You have to use different id for different elements
<input type="text" class="form-control" id="Job_Name" name="Job_Name" required="">
You need to change de id for each input
Becouse You mentioned the two input element with same id ('Job_Name') in same page
You cannot give the same id in same page to two different element
id is an identifier that defines the identity of the element. It is designed to act like a key to the element and hence it needs to be unique.
Check this answer..
https://stackoverflow.com/a/2187788/8230086
Change the IDs on your inputs as they are what is causing your problem.
As a general rule you don't want to have the same id's on any of your elements.
id suggest using something along the lines of job_name1/job_name2
Just use new { id = "" } for one of the two fields:
#Html.HiddenFor(m => m.Name, new { id = "" })
if you are using react native web or expo pwa use nativeID in place of id
<input nativeID="someId"/>

Using form data and generating HTML based on it

Looking for something to take data from a form like this one:
<form id="rendered-form" name="rendered-form">
<div class="rendered-form">
<div class="fb-text form-group field-text-1534368808722">
<label class="fb-text-label" for="text-1534368808722">Name</label><input class="form-control" id="text-1534368808722" name="text-1534368808722" type="text">
</div>
<div class="fb-text form-group field-text-1534368811041">
<label class="fb-text-label" for="text-1534368811041">Email</label><input class="form-control" id="text-1534368811041" name="text-1534368811041" type="text">
</div>
<div class="fb-text form-group field-text-1534368811041">
<label class="fb-text-label" for="text-1534368811041">Link</label><input class="form-control" id="text-1534368811041" name="text-1534368811042" type="text">
</div>
</div>
</form>
And insert the data into a HTML template. For example:
<div class="name">FORM TEXT HERE</div>
<div class="email">FORM TEXT HERE</div>
link
I would love to use Vue.js for this if at all possible, I've been playing around with it and this seems like something it would be capable of.
I'm trying to use this to quickly make AMP pages (I know I could do it programmatically, but due to restrictions I cannot at this time). I don't want to have a database, it doesn't need to store this. I just want to be able to insert my data, press a button, and have it spit out HTML or an HTML file based on the template and provided data and be done.
If you already handled the form submit, you can change the content of your divs with js selectors, like this:
document.getElementsByClassName("name")[0].innerHTML = nameFromFormInput;

HTML data parsing from DIV container

As I am pretty new to Web Development this might be an easy question.
In my HTML file I use the form method GET to parse data with the URL (it must be done this way, cannot be changed).
In this html there is a Text Field.
<div class="form-group {*if $ERROR_BEMERKUNG*has-error*/if*}">
<label for="text-comment">Bemerkung</label>
<textarea name="text-comment" id="text-comment" class="form-control" rows="3" placeholder="{$TRANSLATE.USERDATA.BEMERKUNG|default:'USERDATA.BEMERKUNG'}">{$COMMENT}</textarea>
</div>
How can I get the inside of this textfield, whatever is written in it afterwards, into my GET method? Hardcoded it works that way, but I don't know how I can get the value out of the div.
<input type="hidden" id="bemerkungen" name="bemerkungen" value= "TEST" />
EDIT: I didn't have to do anything for the textarea, it got parsed correctly.
But I have another div with a number field.
<div class="width115 left form-group has-feedback">
<span id="personen"> Anzahl Personen </span>
<input class="btn-input-wrapper" id="personen" type="number" min="1" value="1"/>
</div>
The value out of there is never parsed.
If by textfield you mean textarea, here's your answer:
All details you have in w3schools:
https://www.w3schools.com/tags/att_textarea_form.asp
Example:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_textarea_form
When you send example, it will show you generated GET link with textarea value.
You missing form="usrform" part tho, but it should work if you keep everything between <form> tags.

How to check in real time if a input field matches another variable with angular.js

I have a ng-repeat that loops through an object and displays a list of strings and input fields, example below. I need to set up a real-time verification for these input fields. The input field should be equal to the barcode string. If a user types in a string that IS NOT equal to the barcode string than angular should prompt the user that it must equal the barcode string and clear the input field. Is this possible with angular? I’ve accomplished similar tasks with jQuery.. could I combine some jQuery and Angular to achieve this verification? I'm new with angular.js so any help is greatly appreciated.
HTML:
<div ng-repeat="(index, val) in barcodes.barcodes track by $index">
<div class="form-group row" ng-show="barcodes.barcodes[index]">
<label class="col-sm-3 form-control-label" style="margin-top: 5px"> {{ barcodes.adaptors[$index] }} </label>
<label class="col-sm-3 form-control-label" style="margin-top: 5px"> {{ barcodes.barcodes[index] }} </label>
<div class="col-sm-6">
<input type="email" class="form-control" placeholder="Barcode">
</div>
</div>
</div>
Example bars Object:
var bars = {
"adaptors": ["506-704", "505-703", "503-702", "508-701", "507-705", "502-706", "504-707", "501-708"],
"barcodes": ["11-11-1111","11-11-2222","11-11-3333","11-11-4444","X","X","X","X"];
}
if you want real time...watcher may be what you're looking for. But watcher is not efficient.
What would be best is to use the ng-change directive. This way, every time a user types, it will trigger the function passed to the ng-change directive. This can allow you to handle logic inside a function and react however you want.
https://docs.angularjs.org/api/ng/directive/ngChange

creating dynamic forms using ng-repeat

Hello everyone I need to create some dynamic forms so users can configure feeds to their specification.
I have used ng-repeat to do the following:
For each feed a user needs to configure a new tab is created
for each property a feed has a label and input textbox is created.
Markup:
<tabset>
<tab ng-repeat="feed in feeds" heading="{{feed.heading}}">
<form role="form">
<div class="row" ng-repeat="property in feed.properties">
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon">
<span>{{property.name}}</span>
</span>
<input type="text" class="form-control" value="{{property.value}}">
</div>
</div>
</div>
</form>
</tab></tabset>
This works just fine with the backing json that I have however I am wondering what the accepted way of capturing the data for this kind of use case, obviously I won't know how many feeds or properties each feed has so I suppose I need to bind this to an array in some way.
The question is how?
use ng-model
<input type="text" class="form-control" ng-model="property.value">
This way the textbox is bound to property.value. angular automatically updates property.value when you change the text in the textbox. You can use it in your JS just like any other variable. That's the beauty of angular.

Categories