We Keep Coding

*ngIf on password validation not working Angular 5

I cant seem to figure out what the issue is I have a form input like so..
<div class="form-group">
<label class="form-label" for="password">Change Password</label>
<input type="password" class="form-control" id="password" name="password" [(ngModel)]="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$#$!%*?&])[A-Za-z\d$#$!%*?&]{8,}">
</div>
and then below it I have..
<div *ngIf="!password.valid && (password.dirty || password.touched)" class="password-reminder">
<p>Your password must be over 8 characters and include an uppercase letter, a number and a special character</p>
</div>
now if I dont have a valid password and its been touched nothing happens, but I do know the validation is working because the button on my form is disabled until I put the password In correctly..
Not sure what I'm doing wrong? why wont the div show itself??
EDIT
It works if I take away && (password.dirty || password.touched) but I only want to show the message If they enter a not valid password and untouch..
I can see in my dev tools that the classes are being applied
but it doesnt dissapear when my password is valid..
EDIT 2
I am using template driven forms
Any help would be appreciated.

Create a template reference variable on your Input field.
<input #passwordField="ngModel" type="password" class="form-control" id="password" name="password" [(ngModel)]="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$#$!%*?&])[A-Za-z\d$#$!%*?&]{8,}">
Make sure to update the references to password with passwordField in your template.
<div *ngIf="!passwordField.valid && (passwordField.dirty || passwordField.touched)" class="password-reminder">
<p>Your password must be over 8 characters and include an uppercase letter, a number and a special character</p>
</div>
Since you are using template driven forms, there is no corresponding password property in your component, and hence most use a template reference variable. You can find a demonstration of this method here.

Try this.
Add this part to the input field(a template reference variable)
#passwordField="ngModel"
<div class="form-group">
<label class="form-label" for="password">Change Password</label>
<input type="password" class="form-control" id="password" name="password" [(ngModel)]="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$#$!%*?&])[A-Za-z\d$#$!%*?&]{8,}" #passwordField="ngModel">
</div>
<div *ngIf="!passwordField.valid && (passwordField.dirty || passwordField.touched)" class="password-reminder">
<p>Your password must be over 8 characters and include an uppercase letter, a number and a special character</p>
</div>
Then it should work. Read more about template driven forms in here.

As Others said You should use an element variable like #passwordElement="ngModel"
have a look at stackblitz

As others have said, you need to provide the template reference in your password div:
#password=ngModel
Also add required to your password tag like so:
<input type="password" class="form-control" id="password" name="password" [(ngModel)]="password" #password=ngModel pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$#$!%*?&])[A-Za-z\d$#$!%*?&]{8,}" required>
I just tested it out and it works on my end.

Create a temp reference variable. something like
<input #password=ngModel />
then use #password to do validation. Also make sure you are applying touched and dirty class correctly.

content script to auto fill user password form created by Angular [duplicate]

This question already has answers here:
Update Angular model after setting input value with jQuery
(12 answers)
Closed 5 years ago.
I have created a content script extension to auto fill user and password fields on webpage. It works OK in normal form like below -
<input name="userId" class="form-field" id="userId" placeholder="Username" autocomplete="off" tabindex="1" type="text">
<input name="password" class="form-field" id="password" placeholder="Password" autocomplete="off" tabindex="2" type="password">
<input name="signIn" class="btnBlue" id="signIn" value="Sign In" tabindex="4" onclick="checkIECompat()" type="button">
However, when it comes to Angular-generated form, no matter how hard I try to play with those ng-xxxxxx classes, it does not work.
<input type="text" class="form-control text-center modal-header ng-valid-maxlength ng-touched ng-dirty ng-valid-parse ng-invalid ng-invalid-required" name="idCard" placeholder="User Name" maxlength="20" autocomplete="off" ng-model="request.userName" required="">
<input type="password" class="form-control text-center ng-dirty ng-valid-parse ng-touched ng-invalid ng-invalid-required" name="password" placeholder="Password" aria-describedby="" autocomplete="off" ng-model="request.password" style="margin-top:15px" required="">
<button type="submit" class="btn btn-blue btn_login" value="Log In" ng-click=" login('/payment')" ng-disabled="loginForm.$invalid" disabled="disabled">เข้าสู่ระบบ <span class="glyphicon glyphicon-log-in" style="font-size:14px" aria-hidden="true"></span></button>
Above is the code when page is first loaded. I manually key in the form and inspect the code when all validity have been checked and the submit button is enabled. Then, I use my program to change those classes and other details to make them identical (except its order). I even force enable the button by removing disabled attribute but it does not help. The button can be clicked but nothing happens.
My question is "is it possible to achieve this?". Are there any limitations concerning Angular that prevent the content script running successfully? Or it is just the coding issue that I have not been able to make it work.
One more problem is I do not own Angular code. It belongs to a website that I wan to use my extension with.

As guided by #wOxxOm, after add the following lines to trigger the event after setting input value (to update Angular model), my problem is solved.
document.getElementsByName("idCard").item(0).value = 'XXXXX';
document.getElementsByName("idCard").item(0).dispatchEvent(new Event("input"));

angularJs check if input is entered

I am new to angular Js and developing a form where the input box will minimize when input is being entered. i am using ng-blur,ng-click and ng-focus and calling the function which will change the css classes for this purpose.
But the issue is when id/password is saved, the css class is not changed as their is no click,focus,blur on the form.
Below is the code snippet
<input class="field" name="id" ng-model="form.id"
ng-click="onClickFunction()" ng-focus="onFocusFunction()"
ng-blur="onBlurFunction(fieldValue)" type="text" required>
How can the id/password that is saved be recognized?
Thanks in advance.

I think you can use something like below assuming loginform as the form name and username as your name for userID field
<input id="login_username" class="form-control" type="text" ng-minlength="5"
name="userName" placeholder="Username" ng-model="userName" required
autofocus>
<div style="color: red" ng-messages="loginForm.userName.$error" ng-if="loginForm.userName.$dirty">
<div ng-message="required">This field is required</div>
<div ng-message="minlength">Username should be over 5 characters</div>
</div>

HTMLunit changing elements on page making them inaccessible

I'm using HTMLunit (tried both 2.43.1 and 2.46.0). I'm having a problem where it appears HTMLunit is actually rendering/changing the HTML during the load.
If I inspect the HTML from within Chrome, the field looks like this:
<div class="field">
<input id="password" name="password" placeholder="Password" type="password">
</div>
Pretty easy in that I should be able to select the field by id="password", right? Well, when I load the page through HTMLunit:
driver.setJavascriptEnabled(true);
driver.get(baseUrl + "/");
String foo = driver.getPageSource();
System.out.println("======\n" + foo + "\n==========\n");
Looking at the output, the field looks like this:
<div class="field">
<input id="password" type="text" placeholder="Password" class="placeholder" value="Password"/>
<input name="password" placeholder="Password" type="password" style="display: none;"/>
</div>
Now, one more thing, this div is only made visible by a click on a JavaScript button. So to do that, I execute:
driver.findElement(By.cssSelector("button.js-login-widget-button")).click();
foo = driver.getPageSource();
System.out.println("======\n" + foo + "\n==========\n");
Now the field looks like this:
<div class="field">
<input id="" type="text" placeholder="Password" class="placeholder" value="Password"/>
<input name="password" placeholder="Password" type="password" style="display: none;"/>
</div>
So, now, I have no id to select the field with. I could select by name, but that input is invisible, so I get an ElementNotVisibleException.
But my big question is WHY is HTMLunit changing the HTML and breaking me?
Help, please!
Thanks,
David

parsley data-equalto not working

I'm trying to match up passwords using Parsley.js but it doesn't seem to be working. Here is the code:
<div class="control-group">
<!-- Password-->
<label class="control-label" for="password">Password</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-eye-close"></i></span>
<input type="password" id="password" name="password" placeholder="" class="input-xlarge" data-trigger="change" data-required="true" data-minlength="6">
</div>
<p class="help-block">Password should be at least 4 characters</p>
</div>
</div>
<!-- ************ NOT WORKING *************** -->
<div class="control-group">
<!-- Password -->
<label class="control-label" for="password_confirm">Password (Confirm)</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-eye-close"></i></span>
<input type="password" id="password_confirm" name="password_confirm" placeholder="" class="input-xlarge" data-equalto="#password" data-trigger="change focusout" data-required="true" >
</div>
<p class="help-block">Please confirm password</p>
</div>
</div>
This part data-equalto="#password" should do the check, but it doesn't seem to work.
I call the parsley validate in the form like so:
<form class="form-horizontal" id="userForm" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" data-focus="first" data-validate="parsley">

Been struggling with this for a few hours, found the answer courtesy of JoelCDoyle. I want to re-iterate it because though the question is dated, the answer provided by Joel works. Thanks! :)
<input type="password" name="pw" id="pw"
parsley-minlength="8"
parsley-required="true"
/>
<input id="pwtwo" type="password" name="pw-verify"
data-parsley-equalto="#pw"
parsley-required="true"
/>
this is the attribute you need to make the compare function work with parsley.js:
data-parsley-equalto="#pw"

I'm not sure if this will help you but I have a working solution here: http://codepen.io/anon/pen/KNyjoY
Basic installation
<form data-parsley-validate>
...
</form>
Javascript installation (I'm using this)
<form id="form">
...
</form>
<script type="text/javascript">
$('#form').parsley();
</script>
I have added an event for #password to trigger #cpassword form validation.
$('#password').on('change input keyup', function() {
if (this.value) {
$('#cpassword').prop('required', true).parsley().validate();
} else {
$('#cpassword').prop('required', false).parsley().validate();
}
});

In the newest Parsley Version, you don't call the API by "data-" Attributes anymore. Not quite sure, if this is the case on your Version (i know data values worked in the past), but try it with the New API.
Therefore you call the form different with the property "parsley-validate" which is True if Set. And the Constraints are called with "parsley-[constraint]".
As stated on the official Parsley.js Site, its not quite W3C compatible, but for some weird Reason he likes it like that. However he also gives an Solution with defining a Namespace for Parsley to make it W3C compatible.
If you can Deliver the old Parsley version, I could have a look on that too.
Attention
This answer (and maybe question) is dated.
The answer may not be valid anymore, keep a look at the Comments on this answer.