Develop Reference

Input Password PrimeNG only works after clicking on the input

I have the following problem when using ngprime, when the page loads the input is buggy. If I click on the input it is correct, according to the second photo.
Can you help me with this?
I installed prime flex, prime ng. I imported the styles in angular.json
formulario: FormGroup = this.fb.group({
email: [null, [Validators.email, Validators.required]],
password: [null, Validators.required]
});
<form [formGroup]="formulario" class="p-fluid mt-5">
<fieldset class="field">
<label for="password" class="block">Email</label>
<span class="p-input-icon-left my-2">
<i class="pi pi-user"></i>
<input id="email" formControlName="email" type="email" pInputText placeholder="Email">
</span>
</fieldset>
<fieldset class="field mt-2">
<label for="password" class="block">Password</label>
<p-password id="password" formControlName="password" [toggleMask]="true" promptLabel="Ingresa tu contraseña"
weakLabel="Débil" goodLabel="Buena" strongLabel="Fuerte">
</p-password>
</fieldset>
</form>

It appears to be a known bug in the component. You can see the thread on GitHub here.
There's a workaround until they fix it. Add the following attribute to the p-password element:
styleClass="p-password p-component p-inputwrapper p-input-icon-right"
Like this:
<p-password id="password"
[toggleMask]="true"
promptLabel="Ingresa tu contraseña"
weakLabel="Débil" goodLabel="Buena" strongLabel="Fuerte"
styleClass="p-password p-component p-inputwrapper p-input-icon-right">
</p-password>

signInWithEmailAndPassword failed: Second argument "password" must be a valid string

i am trying to set up a simple authentification.it worked in ionic 1.X but it didn't work in a webapp using angularJs.it's the same code.somehow it didn't work.tried adding "" but it didn't work
here's my code
$scope.emailPassLogin = function () {
firebase.auth().signInWithEmailAndPassword($scope.email, $scope.pwd)
.then(function (response) {
console.log(response);
}).catch(function (error) {
// Handle Errors here.
$scope.error = error;
$scope.message = error.message;
});
};
the ng-model is present in the view
<form class="form-signin" role="form">
<input type="text" ng-Model="email" class="form-control" placeholder="Adresse Email" required="" autofocus="">
<input type="password" ng-Model="pwd" class="form-control" placeholder="mot de passe" required="">
<button ng-click="emailPassLogin()" type="submit">Se Connecter</button>
</form>
you see it's pretty straight-forward.Yet somehow the function works in Ionic but not in webapp angularjs
thank you for the help

ng-Model should be ng-model. It is case sensitive. Your 2 html input tags then become:
<input type="text" ng-model="email" class="form-control" placeholder="Adresse Email" required="" autofocus="">
<input type="password" ng-model="pwd" class="form-control" placeholder="mot de passe" required="">

<button ng-click="login()"
I don't see a login function in the controller.My angularjs is a little rusty but I think you need to have that named function in the controller you are using for your component.

i made it work.here's what i did
$scope.user1=[];
$scope.login=function(){
firebase.auth().signInWithEmailAndPassword($scope.user1.email,$scope.user1.pwd)
.then(function(firebaseUser){
console.log("Signeds: "+firebaseUser.uid);
window.localStorage.setItem("email",firebaseUser.email);
}).catch(function(error){
console.error("Authenticationed: "+error);
});
}
<form class="form-signin" role="form">
<input type="text" ng-model="user.email" placeholder="Adresse Email" required="">
<input type="password" ng-model="user.pwd" placeholder="mot de passe" required="">
<button ng-click="login()" type="submit">Se Connecter</button>
</form>
added the user in ng-model and in js file

How to remove password saved by remember me option by browser using Angular.js and Javascript

I have one issue in my password field and user name field using Angular.js.I have a login page.Suppose user clicked on remember me option of browser after the login.These saved user name and password is displaying on my username field and password field.I am explaining my code below.
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">User Name :</span>
<div ng-class="{ 'myError': billdata.uname.$touched && billdata.uname.$invalid }">
<input type="text" name="uname" id="uname" class="form-control" placeholder="add user Name" ng-model="login_name" ng-minlength="6" ng-keypress="clearField('uname');" tabindex="6" >
</div>
</div>
<div class="help-block" ng-messages="billdata.uname.$error" ng-if="billdata.uname.$touched">
<p ng-message="minlength" style="color:#F00;">This field is too short.The min length of your user name should be 6.</p>
</div>
<div class="input-group bmargindiv1 col-md-12" ng-hide="showpass">
<span style="position:absolute; right:5px; margin-top:6px; top:0px;"><button class="btn btn-xs btn-success"ng-mousedown="hideShowPassword();" ng-mouseup="hideShowPassword();" ng-mouseleave="hidePassAfterLeave();" ><i class="fa fa-eye"></i></button></span>
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Password :</span>
<div ng-class="{ 'myError': billdata.pass.$touched && billdata.pass.$invalid }">
<input type="{{inputType}}" name="pass" id="passno" class="form-control" placeholder="password" ng-model="password" ng-minlength="8" ng-pattern="/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[_!##\$%\^&\*])(?=.{8,})/" ng-keypress="clearField('passno');" tabindex="7" >
</div>
The Login credentials used by user at the time of login is available where ever the username and password filed is found which i dont need.Here I need blank user name and password field even the user clicked remember me option of browser.Please help me to resolve this issue .

Try to add 2 hidden inputs to start of your form:
<form autocomplete="off">
<div style="display: none;">
<input type="text" id="PreventChromeAutocomplete"
name="PreventChromeAutocomplete" autocomplete="username" />
<input type="password" id="PreventChromePasswordAutocomplete"
name="PreventChromePasswordAutocomplete" autocomplete="password" />
</div>
<!-- Rest form -->
</form>

you can try this
<input type="password" autocomplete="off" />
try adding autocomplete="off" on your form also
<form autocomplete="off" ...></form>

Try using javascript as :
$('#passno').attr("autocomplete", "off");
or add (autocomplete="off") attribute in html input tag :
For more info, refer http://www.w3schools.com/tags/att_input_autocomplete.asp
Try same for username field as well. :)

show client validation message for input file upload size limit using jquery?

I am trying validate upload file limit to 2.5 mb max. I need to show validation message on <span class="field-validation-valid" data-valmsg-for="Attachement" data-valmsg-replace="true"></span> when focus lost from the field.
right now I am validating at client side like this.
<div class="col-sm-7">
<input class="form-control" id="Attachement" name="Attachement" type="file" value="">
<span class="field-validation-valid" data-valmsg-for="Attachement" data-valmsg-replace="true"></span>
</div>
var attachement = document.getElementById('Attachement');
attachement.onchange = function() {
var file = attachement.files[0];
if (file.size > 2621440) {
//Now Here I need to update <span>
alert('Filesize must 2.5mb or below'); // don't want alert message
}
};
example
<div class="col-sm-7">
<input class="form-control valid" data-val="true" data-val-required="The First Name field is required." id="FirstName" name="FirstName" placeholder="First Name" required="required" type="text" value="">
<span class="field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="true" style="color:Red"></span>
</div>
after validation
<div class="col-sm-7">
<input class="form-control input-validation-error" data-val="true" data-val-required="The First Name field is required." id="FirstName" name="FirstName" placeholder="First Name" required="required" type="text" value="">
<span class="field-validation-error" data-valmsg-for="FirstName" data-valmsg-replace="true" style="color:Red"><span for="FirstName" class="">
The First Name field is required.</span>
</span>
</div>
and also update css class from <input class="form-control"... to <input class="form-control input-validation-error"... to highlight the textbox to red.
How to do in jquery?

I don't know if there's a jQuery equivalent to file.size, but you can simply get the DOM object from the jQuery object with .get() and use the Javascript property.
$("#Attachement").change(function() {
var file = $(this).get(0);
if (file.size && file.size > 2621440) {
$(this).addClass("input-validation-error").siblings(".field_validation-valid").text("File must be smaller than 2.5MB.");
} else {
$(this).removeClass("input-validation-error").siblings(".field_validation-valid").empty();
}
}

How to validate form controls data size not more than 2.5 mb?

I have form which has controls like first name, last name, etc and also file upload attachment. I need to calculated all the data should reach more than 2.5 mb.
How can we do that with jQuery and show validation error on that page?
<form action="/ContactSubmission" class="form-horizontal" enctype="multipart/form-data" method="post" role="form" novalidate="novalidate">
<div class="col-sm-7">
<input class="form-control input-validation-error" data-val="true" data-val-required="The First Name field is required." id="FirstName" name="FirstName" placeholder="First Name" required="required" type="text" value="">
<span class="field-validation-error" data-valmsg-for="FirstName" data-valmsg-replace="true" style="color:Red"><span for="FirstName" class="">The First Name field is required.</span>
</div>
<div class="col-sm-7">
<input class="form-control" data-val="true" data-val-required="The Last Name field is required." id="LastName" name="LastName" placeholder="Last Name" type="text" value="">
<span class="field-validation-valid" data-valmsg-for="LastName" data-valmsg-replace="true" style="color:Red"></span>
</div>
<div class="col-sm-7">
<input class="form-control" data-val="true" data-val-required="The Email Address field is required." id="EmailAddress" name="EmailAddress" placeholder="Email Address" type="text" value="">
<span class="field-validation-valid" data-valmsg-for="EmailAddress" data-valmsg-replace="true" style="color:Red"></span>
</div>
<div class="col-sm-7">
<input class="form-control" id="Attachement" name="Attachement" type="file" value="">
</div>
<div class="form-group">
<div class="col-sm-4 col-md-offset-5">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-default" id="cancel">Cancel</button>
</div>
</div>

With modern browsers (browsers which support HTML5), you can check the size property of the files in the <input type="file"> element.
var input = $('input[type="file"]')[0];
var fileSize = input.files[0].size // file size in bytes
On older browsers (browsers which do not support HTML5), you cannot achieve this using jQuery because jQuery (javascript) doesn't have access to the size of files that you submit through a <input type="file">. You have two alternate options:
Use a flash uploader (swfupload for example). Flash does have access to the size of files, contrary to javascript.
Let the user upload the file even if it's too big (using your existing form), check the file size on the backend, and then show him in response a message stating that the file has been discarded because it's too big.
The first solution (flash) has the advantage of not letting the user wait until the upload of the oversized file is complete. Since it has access to file sizes, you can display an error before the upload has even started.

You can check the files-property of a file input like this :
<input type="file" name="photo" id="photo">
script :
var photo=document.getElementById('photo');
photo.onchange = function() {
var file = photo.files[0];
if (file.size>2621440) {
alert('Filesize must 2.5mb or below');
}
}