Hi I am not getting this auto address when I am using *ngIf or trying to append the div, otherwise its working completely fine.
What am I supposed to do to get this auto address along with *ngIf and appending it.
<div class="form-group label-floating">
<label class="control-label">Address1</label>
<input type="text" class="form-control search-address" name="address1" placeholder=" " [(ngModel)]="address1" #address1>
</div>
In the above code auto address is working
<div *ngIf="isShow">
<div class="form-group label-floating" *ngFor="let place of places">
<label class="control-label">Place</label>
<input type="text" class="form-control search-address" name="address2" placeholder=" " [(ngModel)]="place.address2" #address2>
</div>
</div>
In the above code auto address is not working and the only difference is I am using structural directives.
my ts code
const address1 = new google.maps.places.Autocomplete(this.address1.nativeElement, { componentRestrictions: { country: 'IN' }, types: [this.adressType]
});
google.maps.event.addListener(address1, 'place_changed', () => { this.place = address1.getPlace(); this.invokeEvent(this.place);
});
Please suggest me a good solution where I can use all three of them.
Thank You.
Related
I have mustache :
my mustache
after I render, there are 4 divs (which are the same 2 div).
html
I want to display only 2 div or remove duplicate div, can someone help me?
code :
{{#bya_jsa}}
{{#jasa}}
{{#bya_jsa}}
{{#no}}
<div id="divbiayapekerjaan" form-no="{{no}}">
{{/no}}
{{/bya_jsa}}
<div class="form-group">
<label><b>Jasa</b></label>
<input type="text" name="bya_js[][jasa]" value="{{jasa}}" class="form-control" placeholder="Masukkan jasa yang ada" required="required">
</div>
{{/jasa}}
{{#by_mulai}}
<div class="form-group">
<label><b>Dimulai</b></label>
<input type="text" name="bya_js[][by_mulai]" value="{{by_mulai}}" class="form-control uang" placeholder="Contoh; Rp 10.000.000" required="required">
</div>
{{/by_mulai}}
{{#by_sampai}}
<div class="form-group">
<label><b>Sampai</b></label>
<input type="text" name="bya_js[][by_sampai]" value="{{by_sampai}}" class="form-control uang" placeholder="Contoh; Rp 60.000.000" required="required">
</div>
<hr>
<br>
{{#bya_jsa}}
{{#no}}
</div>
{{/no}}
{{/bya_jsa}}
{{/by_sampai}}
{{/bya_jsa}}
I think one potential answer you are looking for is found here, a way to handle if/else statements.
OR:
Refactor to include a dynamic "by" value:
...
<div class="form-group">
<label><b>{{by_name}}</b></label>
<input type="text" name="bya_js[][{{by_val}}]" value="{{by_val}}" class="form-control" placeholder="{{placeholder}}" required="required">
</div>
...
I chose by_name as the formatted name, by_val as the value that was more system-looking, and placeholder as that related value. This would allow you to only create one form instead of several. You would need to set by_name and by_val a little differently ahead of time.
I'm using mdb in my ember app. I'm generating dynamic value for the input field. In the UI value and label are getting overlapped. How to deal with it?
<div class="md-form">
<i class="fa fa-user-o prefix grey-text iconSize"></i>
{{input type="text" id="firstName" class="form-control" value=model.firstName}}
<label for="firstName">First Name<i class="mandatoryIcon">*</i></label>
</div>
Try this:
didInsertElement() {
this._super(...arguments);
if (this.get('model.firstName') !== null) {
Ember.$('firstName').focus();
}
}
You can always use the autofocus attribute as well
{{input type="text" id="firstName" class="form-control" value=model.firstName autofocus=true}}
In my website I have a textarea where the user has to write the name of a group project. The idea is to use autocomplete-alt so when the users are writing the name of the group project a dropdown with the projects already created has to be displayed and help them with the autocompletation.
·Code:
-HTML:
<div class="col-lg-6">
<div class="form-group">
<label class="col-sm-2 control-label">Group Project</label>
<div class="col-sm-10"><angucomplete-alt id="groupProjectID"
placeholder="Search Group Projects"
maxlength="50"
pause="100"
selected-object=""
local-data=""
search-fields=""
title-field=""
minlength="1"
input-class="form-control form-control-small"
match-class="highlight"></div>
</div>
</div>
-Javascript:
$scope.getAllGroupProjects = function () {
api.projects.getGroupProjects().success(function (data) {
$scope.groupProjectsList = data;
}).error(function (data) {
alerts.error('Error', 'Error obtaining the group projects');
});
}
groupProjectsList contains all the group projects that have been created. Each GroupProject has two attributes: Name (name of the group project) and Active (boolean that represents if the project is currently active or not).
As you will see in the HTML code there are some attributes with no value since I'm not sure how to use them. I've been reading the documentation(https://github.com/ghiden/angucomplete-alt) but I still have problems figuring out how to use them in my case.
-Edit (SOLVED):
<div class="col-lg-6">
<div class="form-group">
<label class="col-sm-2 control-label">Group Project</label>
<div class="col-sm-10"><angucomplete-alt id="groupProjectID"
placeholder="Search Group Projects"
maxlength="50"
pause="100"
local-data="groupProjectsList"
search-fields="Name"
title-field="Name"
minlength="1"
input-class="form-control form-control-small"
match-class="highlight"></div>
</div>
</div>
You need to provide data to your directive.
Seeing the demos I think you should set
local-data="groupProjectsList"
If this doesn't work, please share a plunker
I am pretty new in HTML 5 and I have the following doubt.
I have a form like this:
<form class="form-horizontal" action="/IDES/salvaRegistrazione" method="POST" name="formRegistrazione">
<div class="form-group">
<label class="control-label col-sm-2" for="inputNome">Nome</label>
<div class="col-sm-10">
<input id="inputNome" class="form-control" type="text" value="" required="required" placeholder="Nome" name="nome">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="inputEmail">E-mail</label>
<div class="col-sm-10">
<input id="inputEmail" class="form-control" type="email" value="" required="required" placeholder="E-mail" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="inputEmail2">E-mail</label>
<div class="col-sm-10">
<input id="inputEmail2" class="form-control" type="email" placeholder="Inserisci nuovamente E-mail" name="inputEmail2">
</div>
</div>
<input id="submitRegistrazione" class="btn btn-default pull-right" type="submit" value="Registrati" name="submitRegistrazione">
</form>
As you can see the input tag have setted the required="required" attribute and as you can see in this JSFiddle if you don't insert the value into the input tag it is automatically shown an HTML error message popup:
https://jsfiddle.net/fntwyn9j/
Now my problem is that into my form I have also 2 field having type="email".
My problem is that I want that if the second email value (the one inserted in the field having id="inputEmail2") is not equal to the first email value (the one inserted into the field having id="inputEmail") appear a custom message (in the same HTML5 style) that say to me that the 2 fields have not the same value and the form is not submitted.
Searching on the web I found this example that use event listener to add custom message: http://jsfiddle.net/B4hYG/9/
But is seems to me that don't work and I have no idea about how to implement the previous requirement.
How can I solve this issue and implement this kind of HTML5 custom validation?
Solved by myself:
$(document).ready(function() {
document.getElementById("inputEmail2").addEventListener("input", function (e) {
valoreInpitEmail = $('#inputEmail').val();
valoreInpitEmail2 = $('#inputEmail2').val();
//alert("value inputEmail: " + valoreInpitEmail + " value inputEmail2: " + valoreInpitEmail2);
//if (e.target.value != "") {
if(valoreInpitEmail != valoreInpitEmail2) {
alert("EMAIL DIVERSE");
//alert("BLABLABLA");
e.target.setCustomValidity("Le E-mail inserite non corrispondono, per favore inserirle nuovamente");
}
else {
// Let the browser decide whether this is a valid email address
// This actually prevents that the call of setCustomValidity()
// in the IF doesn't get removed thus the user cannot submit the form
//alert("ELSE");
e.target.setCustomValidity("");
}
});
});
I am creating a checkout page and I cannot figure out how to do the following. When the customer enters their shipping information, I want to display that same information further down the page in a confirmation section. I will not be submitting the information until the customer places the order, so there is no way to echo this information as I won't be submitting to my db until after they submit it.
I looked into this and I see things with a data-copy function and that is basically what I need except I do not want the copied data to show up in an input field. I just want it to display the text.
So if I had the following field:
Shipping street:
123 Main St.
I would want the 123 Main St to show up in a different section of the page.
I tried doing the data-copy function and I couldn't even get that to work. I'm not sure if this is the best method to use for this. I do not want the copied data to be editable. I have disabled that from my code.
I tried doing this:
<div class="field">
<label class="paddingleft" for="fullname">Full Name</label>
<div class="center"><input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="name" name="ShipToFullname" required> </div>
</div>
This is the confirmation part farther down the page:
<p><input type="text" class="preview" id="name" disabled></p>
The Jquery
$(document).ready(function() {
$(".preview").keyup(function() {
var ElemId = $(this).data('copy');
$("#"+ElemId).val($(this).val());
});
});
Is there a better way I can do this and most importantly an input field not show up with the copied data?
UPDATED CODE
<div class="center">
<div class="field">
<label class="paddingleft" for="fullname">Full Name</label>
<div class="center"><input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" required></div>
</div>
Confirmation part
<p>Shipping to:</p>
<p><div class="preview" id="name"></div></p>
The Jquery
$(document).ready(function() {
$(".preview").on('keyup', function() {
$($(this).data('copy')).html($(this).val());
});
});
Is this what you want?
Note that data-copy="name" should now be data-copy="#name" for it to work
$(document).ready(function() {
$(".preview").on('keyup', function() {
$($(this).data('copy')).html($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field">
<label class="paddingleft" for="fullname">Full Name</label>
<div class="center">
<input type="text" class="biginputbarinline preview" id="ShipToFullname" data-copy="#name" name="ShipToFullname" required>
</div>
</div>
<br>
Your name is:
<div id="name"></div>
Simply change
var ElemId = $(this).data('copy');
$("#"+ElemId).val($(this).val());
to
$('#name').val($('#ShipToFullname').val());
Basicaly it says to set the value of id nameto the value of id ShipToFullname
Here the fiddle => http://jsfiddle.net/9sgcydmg/1/
If you don't want to output the data in another input you can simply set an id to any html element and use instead:
$('#name').html($('#ShipToFullname').val());
Here the fiddle => http://jsfiddle.net/89oeyq0h/
FINAL ANSWER : in it's most simple way, using jQuery, i would do something like this:
<input onkeyup="$('#name').html(this.value)" ... />
<p id='name'></p>
<input onkeyup="$('#addr').html(this.value)" ... />
<p id='addr'></p>
and so on...
http://jsfiddle.net/oky005a0/