Develop Reference

How do I disable list of suggested password shown in an `<InputText type="password">` field used in a razor component for all browsers

I am creating a razor component and it has following field
<InputText type="password" class="form-control" placeholder="New Password" name="password" id="newPw" autocomplete="off" />
When the build is executed and run in Chrome. I see a list of suggested passwords. I don't want this list to be shown. The image is given below
Image of list of password being shown
How can I disable this? In autocomplete attribute. I have also used new-password but it still doesn't hide the list
Regards
Saad Saeed

It's weird, I know. If you give it an ID, it won't ask.
<InputText id="dummyid" type="password" class="form-control"
placeholder="New Password" name="password" id="newPw" autocomplete="off" />

When Blazor components map to a specific html element such as form or input you can usually include html elements.
For a single input you can add autocomplete="off"
<InputText autocomplete="off" ...other stuff.../>
Or you can disable it at form level like so
<EditForm autocomplete="off" ...other stuff...>

Setting correct autofill username and password

In my angular application I have a registration form which has the following fields in the same order
1) email id
2) otp
when the otp is entered the below fields becomes visible
3) full name
4) password
The last element is the submit button.
When we click on submit button the browser prompts the user to save the username and password.
I want the Autofill to save email as the username but its taking the fullname as the username. I tried adding a hidden field with Email filled but it worked on Firefox and dint work on Chrome
Is there any other way to achieve this by not editing the order of the form elements?
Adding html for the inputs
<input type="email" [(ngModel)]="email" name="userName" required />
<input type="text" [(ngModel)]="fullName" name="fullName" id="fullName" #fullName="ngModel" dirname="fullName" />
<input [(ngModel)]="password" id="pwd" type="password" name="password" #password="ngModel" required />
Please guide
Thanks!

Angular 4: mismatch input fields with error message

I want to compare password field and confirm password without creating a new directive, just using ngModel and HTML. I have a submit button blocked if the passwords don't match, and thats working fine. But I want to show a span error message when the user is retyping (or on submit) and so far, right after the first input on the password field (when the retype is empty) I get the error message. It's logical, with the code I have, but I wonder if it's possible to have a better UX without using validators or directives? I've tried several aproaches but nothing worked...Any hint would be appreciated. The code:
<form #confirm="ngForm" novalidate>
<mat-form-field class="full-width">
<input matInput type="password" id="password" placeholder="New Password" name="password"
[(ngModel)]="loginValues.password" required>
</mat-form-field>
<mat-form-field class="full-width">
<input matInput type="password" id="confirmPassword" placeholder="Retype Password" name="confirmPassword"
[(ngModel)]="loginValues.confirmPassword" required>
</mat-form-field>
<!--Error Message-->
<span *ngIf="loginValues.confirmPassword !== loginValues.password">{{ 'login.password_not_match' | translate }}</span>
<div class="child-padding-top no-side-padding" fxLayoutAlign="end center" >
<button class="button-login-register" [disabled]="loginValues.password !== loginValues.confirmPassword" mat-button color="primary"
(click)="clientNewPassword()" >{{ 'login.SUBMIT' | translate }}</button>
</div>
</form>

You should not use a span for *ngIf, unless you are using the span for a purpose (add a class to it, etc.). But it seems you are just using that to hold your *ngIf statement, since *ngIf has to be tagged to an element. If you're going to do this, you should instead use
<ng-container *ngIf=""></ng-container>.
To answer your question, the only thing that I think you can do without applying validation, is to add more logic. For example you could do:
<ng-container* ngIf="loginValues.confirmPassword !== loginValues.password
&& loginValues.confirmPassword.length > 0
&& loginValues.password.length > 0 ">
{{ 'login.password_not_match' | translate }}
</ng-container>
Basically what you're doing is changing it so that the error is not always shown when the passwords don't match, but instead the user has to have filled out both inputs first. There's other things you could do. For example you could use ngTouched/ngDirty, etc. You can set up the rules as you like them.

Different title when input invalid and input empty

I have an input:
<input type="text" pattern="[a-zA-Z ]{0,20}" oninvalid="setCustomValidity('Please insert only letters')" required>
If I input a number, the title will appear. But if I don't input anything, it will give the same error title. How can the title when I input not only letters is different when I doesn't input anyhing?

I think that your problem is similar to the one in this link.
The correct answer there says that:
If you set a value with setCustomValidity() then the field is invalid. That is setting a non-zero length string causes the browser to consider the field invalid. In order to allow for the effects of any other validations you have to clear the custom validity:
<input type="password" name="user_password_new" pattern=".{6,}" required oninvalid="setCustomValidity('Minimum length is 6 characters')" oninput="setCustomValidity('')" />
Here is a working example for your case to see:
<form>
<input type="text" pattern="[a-zA-Z ]{0,20}" oninvalid="setCustomValidity('Please insert only letters')" required oninput="setCustomValidity('')">
<button type="submit">Submit</button>
</form>

AngularJS: ng-if checking model value, but model value of input set only if input is $valid

Here's what I'd like to do:
I have a form with two inputs one is type "email" and the other is type "password".
There's an object called form in the $scope
Both inputs have ng-model directive (ng-model="form.input_name")
I wanna make an icon appear next to the input only if something's typed in the input
That icon has an action attached to clear the input (using angularjs hammer's directive 'ng-tap').
To check if the input is set and make the icon appear I use ng-if="form.input_name.length>0".
The thing is, the model value of the input is only set if the input is $valid, so for my email input the icon only appears if what's typed on the input has a valid email format (a#a.com).
Is there a way to check the view value of the input on the ng-if or is there a better solution for making the icon appear?
Here's the code i'm using(with css classes omitted):
-HTML:
<form name="form-login">
<input placeholder="email" type="email" ng-model="form.email" required>
<i hm-tap="clearContent('email')",ng-if="form.email.length>0">
<input placeholder="password" type="email" ng-model="form.passwd" required>
<i hm-tap="clearContent('passwd')",ng-if="form.passwd.length>0">
</form>
-function to clear input in coffeescript
$scope.clearContent = (fieldName) ->
switch fieldName
when 'passwd' then $scope.form.passwd = ""
when 'email' then $scope.form.email = ""
This works fine for the password input (since it has no validation).
Thanks for reading.

Browser validation will keep the internal value of the input empty until it passes the validation. In this case, an email validation. This means that what the user see and what JS see is different!
You can check the form input's $viewValue and show if it has a length > 0. You will have to name your form (which you already had) and each input (which I added). Also you can access each value by FORMNAME.INPUTNAME.$viewValue.
<form name="formLogin">
<input placeholder="email" type="email" name="email" ng-model="form.email" required /> <i hm-tap="form.email = ''" ng-if="formLogin.email.$viewValue.length>0">!</i>
<input placeholder="password" type="password" name="passwd" ng-model="form.passwd" required /> <i hm-tap="form.passwd = ''" ng-if="formLogin.passwd.$viewValue.length>0">!</i>
</form>
Example: http://jsfiddle.net/TheSharpieOne/6M5JX/1/
Also, you can avoid the clearContent function by setting the field [to an empty string] directly in the hm-tap