Develop Reference

How to get LastPass to detect angularjs material inputs after page change

I have a login page for my angularjs site and I'm using the angularjs material library's inputs.
On first page load LastPass detects the email and password inputs and auto fills them. The problem is if I leave the page and navigate back to the login page (without a full browser refresh), LastPass won't detect the inputs.
My mark up is as follows:
<form class="inputs-form" name="login" layout="column">
<div class="inputs-container">
<h2>Sign In</h2>
<div layout="column" layout-align="start center">
<div ng-if="errorMessage" class="error-text">{{errorMessage}}</div>
<div>
<md-input-container flex="100" class="signin-input-container">
<label>Email</label>
<input class="username" ng-model="email" type="text" />
</md-input-container>
</div>
<div>
<md-input-container flex="100" class="signin-input-container">
<label>Password</label>
<input class="password" ng-model="password" type="password" />
</md-input-container>
</div>
</div>
</div>
<div class="btn-container" flex="100" layout="row" layout-align="center center">
<div>
<button ng-click='login()' class='t3Btn_primary'>Sign In</button>
</div>
</div>
</form>
I've tried setting the id, name and class of the inputs to password and username like I've seen others suggest in other questions but that doesn't work in this case.
It would be great if someone knew how I could get LastPass to detect the inputs everytime the page is rendered and not just when a full browser refresh occurs.
Thanks.

How to submit form to mail address

I'm creating my portfolio and I have implemented a contact form.
I would to receive visitors messages in my gmail. I don't find on the web how to do it in Angular 2/4.
Should I add a Back end site to do that?
<div class="contactcard">
<md-card class="mdcardcontact">
<md-card-header style="background-color: black; width:100%"></md-card-header>
<div>
<md-card-content>
<form [formGroup]="form" class="form">
<div>
<md-input-container class="full-width">
<input mdInput type="text" formControlName="name" placeholder="Votre nom">
</md-input-container>
</div>
<div>
<md-input-container class="full-width">
<input mdInput type="text" formControlName="email" placeholder="Votre adressse mail">
<md-error *ngIf="form.get('email').hasError('pattern') ">
Votre mail n'est pas valid
</md-error>
</md-input-container>
</div>
<div>
<md-input-container class="full-width">
<input mdInput type="tel" formControlName="telephone" placeholder="Votre numéro de téléphone">
<md-error *ngIf="form.get('email').hasError('pattern') ">
Votre mail n'est pas valid
</md-error>
</md-input-container>
</div>
<div>
<md-input-container class="full-width">
<textarea mdInput type="text" formControlName="message" placeholder="Votre message" style="height:200px; "></textarea>
</md-input-container>
</div>
<button md-fab class="send-button">
<md-icon>send</md-icon>
</button>
</form>
</md-card-content>
</div>
</md-card>
</div>

If I understand correctly you're trying to send an email using Javascript on the front end, which is not possible (see also this question). You're going to have to set up a server or use a 3rd party client for this.

You will need a Server-side Language to do this (PHP, C#, Java, Python...). In sending mail to the client some SMTP protocols have to be executed and this in my opinion at the moment has to be done on the server.So collect user information in your contact form and pass it to the method on the server to transport it.

You need some sort of backend script to do that for you. Then you send required data to this script from your angular app.

nodemailer and sendgrid could be used if you can pass it back to the server side

Angular material select get reset

I'm facing another problem with Angular Material.
Now I have a form, with two select. The problem is when I select one value in any of this two select, the other one get reseted and loose his value.
is this a bug? or maybe I'm doing something wrong?
<form name="addTarjeta">
<div ng-controller="MedioPagoController">
<md-input-container class="md-icon md-block">
<label>Tipo de tarjeta</label>
<md-icon class="material-icons"></md-icon>
<md-select ng-model="_tarjeta.medioPago" md-on-open="listaMedioPago()"
required name="medio">
<md-option value="{{medio}}"
ng-repeat="medio in medioPagos track by medio.idMedioPago">{{medio.nombrePago}}</md-option>
</md-select>
</md-input-container>
</div>
<div ng-controller="EntidadBancariaController">
<md-input-container class="md-icon md-block">
<label>Entidad bancaria</label>
<md-icon class="material-icons"></md-icon>
<md-select ng-model="_tarjeta.medioPago" md-on-open="listaEntidadBancaria()"
required name="entidad">
<md-option value="{{entidad}}"
ng-repeat="entidad in entidadBancarias">{{entidad.nombreEntidad}}</md-option>
</md-select>
</md-input-container>
</div>
</form>

As I post in a comment:
You are binding both selects to the same ng-model="_tarjeta.medioPago", so this is the expected behaviour.
I think it's probably just a typo in your code. Could you check it?
Change the ng-model of (probably) your second select to another variable of the controller and the problem should disapear.
Hope it helps

Why does validation work on form names rather than on the model?

Consider this code:
<form class="form-horizontal" name="accountForm">
<div class="form-group" ng-class="{ 'has-error': accountForm.CurrentPassword.$invalid }">
<label class="col-sm-2 control-label">Current Password:</label>
<div class="col-sm-10">
<input class="form-control" type="password" name="CurrentPassword" ng-model="user.CurrentPassword" ng-minlength="8" placeholder="Enter current password">
</div>
</div>
</form>
Why do we have to give the form and input fields a name, and perform validation on that, is there a way to use ng-model directly? It would be so much cleaner if we could do:
ng-class="{ 'has-error': user.CurrentPassword.$invalid }">
Don't take it in the context of one field, but in the context of a form with dozens of fields. It starts to get old very quickly. It seems to me that
<input name="CurrentPassword" ng-model="user.CurrentPassword"/>
is redundant (even though I understand that there is different functionality involved and one is coming from the traditional HTML post methodology). However, I am posting my model in Angular so I don't need that functionality, but I'm forced to add it anyway due to validation?
Edit:
Yes, of course modifying the class and/or using disabled="" based on the model is also an option but results in very ugly HTML and obviously $touched, $invalid and $error would not work... any other options? Or can anyone explain if there's any valid reasoning why it was written in this way?

If you want to use the AngularJS form validation you have to use it as you did.
Otherwise you can do your own rules based on model binding, for example:
<form class="form-horizontal" name="accountForm">
<div class="form-group" ng-class="{ 'has-error': (user.CurrentPassword.length < 8) }">
<label class="col-sm-2 control-label">Current Password:</label>
<div class="col-sm-10">
<input class="form-control" type="password" name="CurrentPassword" ng-model="user.CurrentPassword" placeholder="Enter current password">
</div>
</div>
</form>

AngularJS / JQuery - form input without an associated label

I have a problem with "Form input without an associated label". This appears on [textarea], [select], [select], [input] classes.
Here is my code:
<div class="panel-body">
<form name="f" data-ng-submit="addTodo()">
Nazwa:
<textarea class="form-control" name="newTodo" data-ng-model="formData.newTodo" required></textarea>
Typ:
<select class="form-control" name="type" data-ng-model="formData.type" data-ng-option="value.name for value in categories" required></select>
Estymowany czas:
<select class="form-control" name="estimates" data-ng-model="formData.estimates" data-ng-option="value + 'h' for value in [] | rangeTime:9:true" required></select>
Data:
<input class="form-control" type="text" data-ng-model="formData.date" data-ng-data-picker="" name="date" required readonly="readonly">
<br />
<button class="btn btn-success" data-ng-disabled="f.$invalid">Add <span class="glyphicon glyphicon-ok"></span></button>
</form>
Thanks for help!
Moderator Clarification: The quoted message stated above is a warning provided by JetBrains products within the IDE. The OP is most likely using either
WebStorm or IntelliJ for front-end development.

This is not an error, however it's recommended to associate labels with corresponding form elements for the sake of UX convenience. For example for the name field:
<label for="name">Nazwa:</label>
<textarea class="form-control" id="name" name="newTodo" data-ng-model="formData.newTodo" required></textarea>
I assume your IDE is smart enough to identify missing labels and provide you with a reasonable suggestion to add those.

I guess WebStorm?
just follow the advice and add the label.
label is useful especially for radio, checkbox so that you can active them by merely clicking on the label.