I have a form with email, password, and password again. I want to hide the add sign by default, and only show it if my form is dirty and password matches password again.
I can’t seem to get it to work.
<div ng-controller="MyCtrl">
Hello, {{name}}!
<form name="addUserForm">
<div class="form-row row">
<div class="col-xs-3 col-sm-3">
<input ng-model="newLogin.email" ng-blur="checkEmailRestriction(newLogin.email)" required type="text" class="form-control input-sm" placeholder="Email">
</div>
<div class="col-xs-3 col-sm-3">
<input ng-model="newLogin.password" required stopccp type="password" class="form-control input-sm" ng-change="checkPwdRestriction(newLogin.password)" placeholder="Password">
</div>
<div class="col-xs-3 col-sm-3">
<input stopccp ng-model="newLogin.passwordAgain" ng-change="checkPwdMatch(newLogin.password,newLogin.passwordAgain)" type="password" class="form-control input-sm" placeholder="Password Again">
</div>
<div class="col-xs-3 col-sm-3">
<a ng-click="storeLogin()" ng-if="newLogin.password === newLogin.passwordAgain && addUserForm.$dirty == false" class="btn btn-xs email-action"> add </a>
</div>
</div>
</form>
<hr>
<p>
object = ? {{newLogin}}
</p>
<p>
$dirty = ? {{addUserForm.$dirty}}
</p>
<p>
$valid = ? {{addUserForm.$valid}}
</p>
</div>
I’ve tried
http://jsfiddle.net/bheng/5pzL8gc3/
I hided your button with this :
ng-show="newLogin.password && newLogin.password == newLogin.passwordAgain && addUserForm.$dirty == true"
And it appears when I provide an email and passwords that match.
Related
i'm trying to learn Javascript and some basic HTML with bootstrap v5.
I created a Sign-in form and now i'm try to do some validation for the required field.
I follow the Bootstrap documentations and i managed to get validation for all my input field except for the password, i want to verify if the password are the same or if they are empty field...but i'm stuck.. not familiar with javascript.
my attempt in javascript:
let forms = document.querySelectorAll(".needs-validations");
let pass1 = document.getElementById("password1");
let pass2 = document.getElementById("password2");
Array.prototype.slice.call(forms).forEach( function (form){
form.addEventListener("submit",function (ev) {
// test password check....
if (pass1.value !== pass2.value || pass1.value === "" || pass2.value === "" ){
pass1.className = 'form-control is-invalid'
pass2.className = 'form-control is-invalid'
}
if (!form.checkValidity()){
ev.preventDefault()
ev.stopPropagation()
}
form.classList.add("was-validated")
})
})
but here the result:
As you can see password is always valid and i don't understand why.
my html:
<body class="body">
<div class="center">
<h4 class="title">Sign Up New User</h4>
<form name="signin-form" method="post" class="needs-validations" novalidate id="forms">
<div class="container">
<div class="row mt-3">
<div class="col">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name" placeholder="Name" required>
<div class="invalid-feedback">
Name can't be empty
</div>
</div>
<div class="col">
<label for="surname" class="form-label">Surname</label>
<input type="text" class="form-control" id="surname" placeholder="Surname" required>
<div class="invalid-feedback">
Surname can't be empty
</div>
</div>
</div>
<div class="row mt-3">
<div class="col">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" placeholder="Email" required>
<div class="invalid-feedback">
invalid email
</div>
</div>
<div class="col-4 text-end">
<label for="email" class="form-label">Role</label>
<select class="form-select" id="validationCustom04" required>
<option selected disabled value="">Choose...</option>
<option>Captain</option>
<option>First Officer</option>
</select>
<div class="invalid-feedback">
Please select role
</div>
</div>
</div>
<div class="row mt-3 ">
<div class="col">
<label for="password1" class="form-label ">Password</label>
<input type="password" class="form-control" id="password1" placeholder="Password">
</div>
<div class="col">
<label for="password2" class="form-label ">Confirm Password</label>
<input type="password" class="form-control" id="password2" placeholder="Password">
<div class="invalid-feedback">
Password not match
</div>
</div>
</div>
<div class="row-cols-2 mt-3">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</div>
</form>
</div>
<script src="/validation.js"></script>
<script src="/js/bootstrap.bundle.min.js" ></script>
</body>
What I don't understand is, that your password fields seem to be having a valid class in your posted screenshot. But I can't find it anywhere in your code (neither HTML nor JS).
I'd do it like this:
(Note: I didn't test this code, but it should work. If it works and you want to learn from it, I recommend to read through it step by step and apply it to your logic instead of just copy pasta.)
let form = document.querySelector("form.needs-validations");
// or, to be more specific:
// let form = document.querySelector("form[name='signing-form']")
form.addEventListener("submit",function (ev) {
let pass1 = document.getElementById("password1");
let pass2 = document.getElementById("password2");
// test password check....
if (pass1.value !== pass2.value || pass1.value === "" || pass2.value === "" ){
pass1.classList.add('is-invalid');
pass2.classList.add('is-invalid');
}
if (!form.checkValidity()){
ev.preventDefault();
ev.stopPropagation();
}
form.classList.add("was-validated");
})
Note: the functionality to validate the content of your password-fields will only be triggered once you hit the submit button.
I need to compare below new password field and confirm password field. This is the form
<form novalidate (ngSubmit)="changepasswordform.form.valid && changePassword(this.changepassword, changepasswordform)"
#changepasswordform="ngForm">
<div class="form-group row">
<label for="email5" class="col-sm-5 col-md-5 col-form-label">New Password</label>
<div class="col-sm-7 col-md-7">
<input type="password" class="form-control" pattern="^(?=.*[A-Za-z])(?=.*\d).{8,}$" required
[class.is-invalid]="newpassword.invalid && newpassword.touched" name="newpasswords"
#newpassword="ngModel" [(ngModel)]="changepassword.newPassword"
placeholder="New Password">
<div [class.d-none]="newpassword.valid || newpassword.untouched">
<small class=" text-danger" *ngIf="newpassword.errors?.required">Password is
required</small>
<small *ngIf="newpassword.hasError('pattern')" class=" text-danger">
Password should be 8 characters, at least one
letter and one number</small>
</div>
</div>
</div>
<div class="form-group row">
<label for="email5" class="col-sm-5 col-md-5 col-form-label">Confirm Password</label>
<div class="col-sm-7 col-md-7">
<input type="password" class="form-control"
[class.is-invalid]="repassword.invalid && repassword.touched" name="repassword"
#repassword="ngModel" placeholder="Confirm Password" compare="newpassword"
[(ngModel)]="changepassword.repassword" required>
<div [class.d-none]="repassword.valid || repassword.untouched">
<small *ngIf="repassword.errors?.required" class="text-danger">Confirm password is
required</small>
</div>
<div class="text-danger"
*ngIf="repassword.invalid && (repassword.dirty || repassword.touched)">
<small class="login-val" *ngIf="repassword.errors['compare']"> Confirm password do not
match</small>
</div>
</div>
</div>
</form>
When user type the text box, validation should be check. Do you know how to do this. I need to do this without any library.
Since you are not using reactive forms, you can directly perform a comparison between the models newPassword and repassword to set the error message.
Please refer following stackblitz.
Code: here
Output: here
I am new in angular 2, i am making a "User Register" form but it shows error in "Property does not exist on type" in Phone number Validation.
I am compiling in JIT and AOT.
In JIT compiler shows error message and run my user register form it is working properly. but when i compile with AOT shows compilation error.
I am reading the angular 2 form validation official doc here is the link Angular 2 form validation
Below is my Html Form and compiler Output
Html Form
<form class="ui large form" method="post" (ngSubmit)="onSubmit(registerForm.form.valid)" #registerForm="ngForm" novalidate>
<sm-loader [complete]="!formSubmited" class="inverted" text="Loading..."></sm-loader>
<div class="form-group">
<div class="col-md-12 img-bottom">
<div class="col-md-offset-4">
<img (click)="profileImage.click()" class="img img-responsive img-circle ui middle aligned tiny circular image profileImage"
[src]="profileImageSrc" />
<input class="form-control user-reg-img" (change)="fileChangeEvent($event)" type="file" accept="image/*" #profileImage [hidden]="true"
/>
</div>
<div class="col-md-12 image-padding">
<span class="user-reg-img-name" (click)="profileImage.click()">{{profileImageName}}</span>
</div>
</div>
</div>
<div class="form-group">
<label><strong>Signup with Email Address:</strong></label>
</div>
<div class="form-group">
<p class="success text-center">{{successMessage}}</p>
<p class="error text-center">{{errorMessage}}</p>
<div class="field">
<input type="text" name="name" placeholder="Name" [(ngModel)]="register.name" #name="ngModel" required class="form-control input-reg"
/>
<div [hidden]="name.valid || name.pristine" class="error text-left">
Name is required
</div>
</div>
</div>
<div class="form-group">
<div class="field">
<input class="form-control input-reg" type="email" name="email" placeholder="Email" [(ngModel)]="register.email" #email="ngModel"
required />
<div [hidden]="email.valid || email.pristine" class="error text-left">
Email is required
</div>
</div>
</div>
<div class="form-group">
<input type="text" id="mobile" class="form-control input-reg" required minlength="10" maxlength="10" name="mobile" [(ngModel)]="register.mobile"
placeholder="Phone Number" #mobile="ngModel" pattern="[0-9]+">
<div *ngIf="mobile.errors && (mobile.dirty || mobile.touched)">
<div class="error text-left" [hidden]="!mobile.errors.required">
Mobile Number is required
</div>
<div class="error text-left" [hidden]="!mobile.errors.minlength">
Mobile Number must be at least 10 characters long.
</div>
<div class="error text-left" [hidden]="!mobile.errors.maxlength">
Monile Number cannot be more than 10 characters long.
</div>
</div>
</div>
<div class="form-group">
<div class="field">
<input class="form-control input-reg" type="password" name="password" placeholder="Password" [(ngModel)]="register.password"
#password="ngModel" required />
<div [hidden]="password.valid || password.pristine" class="error text-left">
Password is required
</div>
</div>
</div>
<div class="form-group">
<input type="checkbox" name="isAgree" [(ngModel)]="register.isAgree" #isAgree="ngModel" required />
<label id="label-terms-cond">I Agree to Post Bucks Terms & Conditions</label>
<div [hidden]="!showTermsAgreeErrorMsg" class="error text-left">
Please agree the terms and conditions to continue
</div>
</div>
<div class="form-group">
<textarea rows="4" class="form-control font-small terms-cond-textarea" rows="7">You must follow any policies made available to you within the Services.</textarea>
</div>
<div class="form-group">
<button class="fluid yellow large ui button btn btn-block btn-warning reg-btn-submit" type="submit">Signup</button>
</div>
</form>
AOT Output
Thanks in advance
Vikram
It looks the JIT compiler will never check the type of mobile.errors, but AOT check it at compilation by looking this line :
<div *ngIf="mobile.errors && (mobile.dirty || mobile.touched)">
According that in this line mobile.errors is a boolean, you'll obtain your traces...
I can't reproduce this bug (version problem ?), but maybe the following code will fix it :
<div *ngIf="(mobile.errors != null) && (mobile.dirty || mobile.touched)">
There is an opened issue here : https://github.com/angular/angular/issues/11425
Here is my answer, there is actual problem of required which is not found under mobile.errors object. below is my single line code.
!mobile.errors['required']
If object field not found then we use as array in template.
I have two forms in a separate accordion. The first form is an individual information form and the other one is a company information form. Here is the code:
<div class="col-md-10 col-sm-12 col-md-offset-1">
<section class="basic-info">
<div class="heading text-center">
<h1>Basic Information</h1>
<p>Register as an individual OR as a company</p>
</div>
<div class="separator"></div>
<div class="custom-accordion">
<accordion close-others="oneAtATime">
<accordion-group is-open="status.isFirstOpen">
<accordion-heading>
Individual Information<i class="pull-right" ng-class="{'fa fa-angle-down': status.isFirstOpen, 'fa fa-angle-right': !status.isFirstOpen}"></i>
</accordion-heading>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>First Name</label>
<input type="text" ng-disabled="(user.company_name.length > 0 || user.company_number > 0) && (SignUpForm.company_number.$dirty || SignUpForm.company_name.$dirty) " class="form-control input-md" ng-model="user.first_name" name="first_name" placeholder="First Name" required>
</div>
<div ng-messages="SignUpForm.first_name.$error" ng-if="SignUpForm.first_name.$dirty">
<div ng-message="required">
<span>Please enter first name</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Last Name</label>
<input type="text" ng-disabled="(user.company_name.length > 0 || user.company_number > 0) && (SignUpForm.company_number.$dirty || SignUpForm.company_name.$dirty) " class="form-control input-md" ng-model="user.last_name" name="last_name" placeholder="Last Name" required>
</div>
<div ng-messages="SignUpForm.last_name.$error" ng-if="SignUpForm.last_name.$dirty">
<div ng-message="required">
<span>Please enter your last name</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Salutation</label>
<select class="form-control input-md" ng-disabled="(user.company_name.length > 0 || user.company_number > 0) && (SignUpForm.company_number.$dirty || SignUpForm.company_name.$dirty)" ng-model="user.salutation" name="salutation" required>
<option value="">Select Salutation</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
</select>
</div>
<div ng-messages="SignUpForm.salutation.$error" ng-if="SignUpForm.salutation.$dirty">
<div ng-message="required">
<span>Please select a salutation</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Middle Name</label>
<input type="text" ng-disabled="(user.company_name.length > 0 || user.company_number > 0) && (SignUpForm.company_number.$dirty || SignUpForm.company_name.$dirty)" class="form-control input-md" ng-model="user.middle_name" name="middle_name" placeholder="Middle Name" required>
</div>
<div ng-messages="SignUpForm.middle_name.$error" ng-if="SignUpForm.middle_name.$dirty">
<div ng-message="required">
<span>Please enter your middle name</span>
</div>
</div>
</div>
</div>
</accordion-group>
<accordion-group is-open="status.open">
<accordion-heading>
Company Information<i class="pull-right" ng-class="{'fa fa-angle-down': status.open, 'fa fa-angle-right': !status.open}"></i>
</accordion-heading>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Company Name</label>
<input type="text" ng-click"check()" class="form-control input-md" ng-model="user.company_name" name="company_name" placeholder="Company Name" required
ng-disabled="(user.first_name.length > 0 || user.last_name.length > 0 || user.middle_name.length > 0 || user.salutation.length > 0) && (SignUpForm.middle_name.$dirty || SignUpForm.first_name.$dirty|| SignUpForm.last_name.$dirty || SignUpForm.salutation.$dirty)">
</div>
<div ng-messages="SignUpForm.company_name.$error" ng-if="SignUpForm.company_name.$dirty">
<div ng-message="required" >
<span>Please enter a company name</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Company Number</label>
<input type="text" class="form-control input-md" ng-model="user.company_number" name="company_number" placeholder="Company Number" required ng-disabled="(user.first_name.length > 0 || user.last_name.length > 0 || user.middle_name.length > 0 || user.salutation.length > 0) && (SignUpForm.middle_name.$dirty || SignUpForm.first_name.$dirty || SignUpForm.last_name.$dirty || SignUpForm.salutation.$dirty)">
</div>
</div>
<div ng-messages="SignUpForm.company_number.$error" ng-if="SignUpForm.company_number.$dirty">
<div ng-message="required">
<span>Please enter company number</span>
</div>
</div>
</div>
</accordion-group>
</accordion>
</div>
<div class="navigation-btns text-center">
<a ui-sref="form.accountInfo" class="btn btn-info back-btn" ng-click="update(15)">Back</a>
<a ui-sref="form.address" class="btn btn-info continue-btn" ng-click="update(31)">Save and Continue</a>
</div>
<div class="clearfix"></div>
<div class="separator"></div>
</section>
The user should only be able to fill out one of the forms and the other one should be disabled. I am using ngdisabled to accomplish this.
Additionally, I am using $scope.$watchCollection to watch the input fields so that if the user enters a value in at least one of
the input fields of one of the individual information form and then decides to clear
what they have entered and fill out the company information form instead. The error messages that are shown in individual form should have been reset to pristine
based on the following code:
$scope.$watchCollection('[user.company_name,user.company_number,user.first_name,user.last_name,user.middle_name,user.salutation]',function(newValue){
//set individual form inputs to pristine
if(newValue[0].length > 0 || newValue[1] > 0 ){
$scope.SignUpForm.first_name.$setPristine();
$scope.SignUpForm.last_name.$setPristine();
$scope.SignUpForm.middle_name.$setPristine();
$scope.SignUpForm.salutation.$setPristine();
}
//set company form inputs to pristine
if((newValue[2].length > 0) || (newValue[3].length > 0) || (newValue[4].length > 0) || (newValue[5].length > 0)){
$scope.SignUpForm.company_name.$setPristine();
$scope.SignUpForm.company_number.$setPristine();
}});
What I have done so far partially works, the first if conditional statement block within $scope.$watchCollection should set the form
fields of first_name, last_name, middle_name and salutation to pristine if the company name or the company number has a value.
When I enter a value into the company_name input field, any of the input fields that has an error message in the individual form got cleared.
However, if I enter a value into the company_number input field first, none of the error messages got cleared.
The second if statement block does not even work probably either. What could I be doing wrong? Thanks in advance.
I have this form with validation in AngularJS:
<form ng-app="myApp" ng-controller="validateCtrl as validate" name="myForm" action="sendEmail" novalidate>
<div class="form-group">
<input type="email" name="email" class="form-control" ng-model="validate.email" placeholder="Email" required>
<span style="color:yellow" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</div>
<div class="form-group">
<input type="text" name="subject" class="form-control" ng-model="validate.subject" placeholder="Subject" required>
<span style="color:yellow" ng-show="myForm.subject.$dirty && myForm.subject.$invalid">
<span ng-show="myForm.subject.$error.required">Subject is required.</span>
</span>
</div>
<div class="form-group">
<textarea type="text" name="message" class="form-control" ng-model="validate.message" placeholder="Message..." required></textarea>
<span style="color:yellow" ng-show="myForm.message.$dirty && myForm.message.$invalid">
<span ng-show="myForm.message.$error.required">Message is required.</span>
</span>
</div>
<button type="submit" class="btn btn-lg btn-success"
ng-disabled="myForm.email.$dirty && myForm.email.$invalid ||
myForm.subject.$dirty && myForm.subject.$invalid ||
myForm.message.$dirty && myForm.message.$invalid"></button>
</form>
The button is disabled until the email, subject and message aren't correct. Ok, it's fine. But that is true, only if I have already interacted with the form.
In fact, when the page is loaded the first time and I haven't interacted with the form yet, the button is enabled. So, if I click it, I could send an empy email! I would that when the page is loaded the button is disabled and when I fill the fields become enabled.
How can I do that?
Thanks.
You first condition can be ng-disabled=" myForm.email.$invalid . Remove "myForm.email.$dirty
Try like this
<form name="postForm" method="POST" novalidate>
<div class="col-md-8">
<div class="col-md-12">
<div class="col-md-12"><legend>Submit New Post</legend></div>
</div>
<div class="col-md-12 form-group">
<div class="col-md-12" ng-class="{ 'has-error' : postForm.title.$invalid && !postForm.title.$pristine }">
<input type="text" placeholder="Write Title" class="form-control" name="title" ng-model="post.title" required>
<p ng-show="postForm.title.$invalid && !postForm.title.$pristine" class="text-danger">* Write Post Title</p>
</div>
</div>
<div class="col-md-12 form-group">
<div class="col-md-12" ng-class="{ 'has-error' : postForm.url.$invalid && !postForm.url.$pristine }">
<input type="url" placeholder="Write URL" class="form-control" name="url" ng-model="post.url" >
<p ng-show="postForm.url.$invalid && !postForm.url.$pristine" class="text-danger">* Write URL in http:// or https:// Format</p>
</div>
</div>
<div class="col-md-12">
<div class="col-md-12" >
<p class="text-danger">{{msg}}</p>
</div>
</div>
<div class="col-md-12 form-group">
<div class="col-md-12"><button type="submit" class="btn btn-info" ng-disabled="postForm.$invalid" ng-click="submitForm(....)">Submit</button>
<img src="img/loading.gif" ng-show="loading" /></div>
</div>
</div>
</form>
On your submit button, modify the ng-disabled to this:
ng-disabled="myForm.$invalid || myForm.$pristine">
In this case, you don't have to validate all your inputs separetely. Just test if your form is invalid OR if the user never interacted with it yet.
A form in AngularJS has two different states: pristine and dirty. The pristine indicates that your form was never touched. And dirty is the opposite. When the user set any value to one of your inputs, the angular change the state of your form from pristine to dirty.
I guess this post is a good reference to read about forms in angular