Angular 2 template driven form group validation - javascript

I have a question regarding the angular 2 template driven form. I have set up one of this form and I would like to be able to give the user a warning display if one input in a form group is invalid.
For example, let's say I have the following form :
<form class="form" #f="ngForm" (submit)="submit()">
<div class="form-group">
<input type="text" name="firstName" required [(ngModel)]="user.firstName">
<input type="text" name="lastName" required [(ngModel)]="user.lastName">
</div>
<div class="form-group">
<input type="text name="address" required [(ngModel)]="user.address">
</div>
<button type="submit" [disabled]="!f.valid">Submit</button>
</form>
I would like the entire form-group that contains the input "firstName" and input "lastName" to change if either the firstName and/or the lastName is invalid. I know I could do something like that :
<div class="form-group" [class.has-error]="!firstName.valid || !lastName.valid">
<input type="text" name="firstName" required [(ngModel)]="user.firstName" #firstName="ngModel">
<input type="text" name="lastName" required [(ngModel)]="user.lastName" #lastName="ngModel">
</div>
It will works just fine. But here is the tricky part : in this example I only have two inputs with a simple validation rule, so it's easy to check and still readable. But what if I have like 10 inputs to check in a form-group ? I don't want to end up having to manually check the validity of every inputs.
One of the solution I found is to create a subform inside the first one :
<form class="form" #f="ngForm" (submit)="submit()">
<form #subForm="ngForm" [class.has-error]="!subForm.valid">
<input type="text" name="firstName" required [(ngModel)]="user.firstName">
<input type="text" name="lastName" required [(ngModel)]="user.lastName">
</form>
<div class="form-group">
<input type="text name="address" required [(ngModel)]="user.address">
</div>
<button type="submit" [disabled]="!f.valid || subForm.valid">Submit</button>
</form>
Here is a plunker I created to illustrate :
form validation example
But I find it quite ugly, and I'm force to check the two forms to know if there is any problems. So finally my question is : can I set a div as a angular 2 ngForm to be able to validate multiple inputs at once ? Basically is there a better way to perform this kind of validation than creating a subform ? Something like that for example :
<div class="form-group" #names [class.has-error]="!names.valid">
<input type="text" name="firstName" required [(ngModel)]="user.firstName" #firstName="ngModel">
<input type="text" name="lastName" required [(ngModel)]="user.lastName" #lastName="ngModel">
</div>
PS : I know using a function is another solution but it has the same drawbacks : you have to check manually every inputs, depending on the validation rule it can become quite tricky, plus you're losing one of the advantage of using template driven form instead of reactive ones.

Yeah, you can use the ngModelGroup directive for this.
<form class="form" #f="ngForm" novalidate>
<div class="form-group" #fgName="ngModelGroup" ngModelGroup="name" [class.has-error]="!fgName.valid">
<input type="text" class="form-control" name="firstName"
[(ngModel)]="user.firstName"
placeholder="first name"
required>
<input type="text" class="form-control" name="lastName"
[(ngModel)]="user.lastName"
placeholder="last name"
required>
</div>
<div class="form-group">
<input type="text" class="form-control" name="address"
[(ngModel)]="user.address"
placeholder="address"
required>
</div>
<button class="btn btn-primary" [disabled]="!f.valid">Submit</button>
</form>

Related

AngularJS form validation is always true

loginForm.$valid is always return true, even when required fields are not filled out. I was unable to find a similar problem anywhere.
<form name="loginForm"
class="form-login"
ng-submit="loginForm.$valid && loginCtrl.login(navCtrl)"
novalidate>
<div class="form-group">
<label for="email">Username:</label>
<input type="email" class="form-control" id="username" placeholder="Enter username" required>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" required>
</div>
<div class="form-group text-right">
Forgot password?
</div>
<div>Login form is {{loginForm.$valid}}</div>
<button type="submit" class="btn btn-default">Login</button>
</form>
Any help is appreciated.
Form validation and related flags will be set only if you have ng-model controllers assigned to the respective controls. So assign ng-model directive to them. Also instead of using id, you could use name. It will then be used as alias (property names) for the respective ng-model controller assigned on the formController instance (ex: loginForm.username.$valid ).
<div class="form-group">
<label for="email">Username:</label>
<input type="email" class="form-control"
ng-model="ctrl.userName"
name="username" placeholder="Enter username" required>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control"
ng-model="ctrl.password"
name="pwd" placeholder="Enter password" required>
</div>
I had this problem too. The answer was required syntax wasn't there.
So it was always valid to submit the form.
Remember.
if you are on angular 5 material design and using [ngModelOptions]="{standalone: true}" in input field make it false ==> [ngModelOptions]="{standalone: false}"

Disable post of one form element of a form that posts

This is my code:
<form action="/login" method="POST">
<label for="username">Username: </label><input type="text" name="username" id="username">
<label for="password">Password: </label><input type="password" name="password" id="password">
<label for="enc_key">Encryption Key: </label><input type="password" name="enc_key" id="enc_key">
<input type="hidden" name="next_page" value="{{ next_page }}">
<input type="submit" value="submit" id="login_submit">
</form>
Basically I want the username and password to post, but I do not want the enc_key to post. The enc_key is handled by javascript. Is there a way to do this without moving the enc_key input field outside of the form tags?
Try removing the name attribute.
You will still be able to handle your enc_key with the ID, but the input without a name won't be posted.
The easiest thing to do would be to clear that field right before the form posts:
document.getElementById("enc_key").value = '';

How to validate one big form

I will try to explain my problem:
I have one form (I can make second, but i want to have one). And I want to validate the form Using HTML5 or by Jquery plugin for validation and the problem is:
One of the form-fields are for registred users and another one is for new users. So I need to detect valid form or focused? Because HTML5 wan to validate full form. How you are solving this problem? BTW: I'm using Bootstrap 3.
For Exp:
<div class="col-md-12 well">
<div class="col-md-6">
<form id="checkout-login" action="" method="post">
<h3>Existing User</h3>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="input-fancy" id="email" placeholder="E-mail" name="email" required="required" autocomplete="on">
</div>
<div class="form-group">
<label for="password">Heslo</label>
<input type="text" class="input-fancy" id="password" placeholder="********" name="password" required="required" autocomplete="off">
</div>
</div>
<div class="col-md-6">
<h3>New user</h3>
<div class="form-group">
<label for="Name">Name</label>
<input type="text" class="input-fancy" id="name" placeholder="Name" name="name" required="required" autocomplete="on">
</div>
<div class="form-group">
<label for="surname">Surname</label>
<input type="text" class="input-fancy" id="surname" placeholder="Priezvisko" name="surname" required="required" autocomplete="on">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="input-fancy" id="email" placeholder="E-Mail" name="email" required="required" autocomplete="on">
</div>
<div class="form-group">
<label for="password">Heslo</label>
<input type="text" class="input-fancy" id="password" placeholder="********" name="password" required="required" autocomplete="off">
</div>
</div>
<input type="submit" class="btn btn-green btn-lg" value="Pokračovať"></input>
</form>
</div>
JQuery, please help me with ** and you can ignore //
$(document).ready(function () {
$("form").submit(function (e) { e.preventDefault() });
if(**find valid form){
$("**then $(this) is valid --> send").submit(function (e) {
e.preventDefault();
$.ajax({
url: '',
data: //my custom,
success: function (data) {
//Show Thank you
},
cache: false
});
});
}else{
//Show alert please register or login
}
});
Thank you for any answer, advice or comment.
here is the validation plugin jquery validate demo, i used it with bootstrap. It has lots of option for customization. That makes a good choice if you’re building something new from scratch, but also when you’re trying to integrate it into an existing application with lots of existing markup. The plugin comes bundled with a useful set of validation methods, including URL and email validation, while providing an API to write your own methods. All bundled methods come with default error messages in english and translations into 37 locales.
Code is available on https://github.com/jzaefferer/jquery-validation

How do I do form validation and conditional markup in angularjs?

How do I get the errors class/message to display using angular js and forms etc?
I tried this but it doesn't seem to validate at all:
<div class="form-group" ng-class="{'has-error': obj.title.$invalid}">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" ng-model="obj.title" required>
</div>
<div class="alert alert-danger" ng-show="obj.title.$invalid">
You are required to enter a name.
</div>
http://plnkr.co/edit/C6eU4pIS8FTfA59SCShh?p=preview
You have to wrap it inside a <form>, give the form a name and the input a name, then access the validity though formName.inputName
<form name="form">
<div class="form-group" ng-class="{'has-error': obj.title.$invalid}">
<label for="name">Name</label>
<input type="text" name="title" class="form-control" id="name" ng-model="obj.title" required>
</div>
<div class="alert alert-danger" ng-show="form.title.$invalid">
You are required to enter a name.
</div>
</form>
Be aware that <form> is an instance of FormController in angular. That's where we have angular validation.
DEMO

separate validation of two forms with jquery

I have two forms in one page and i would like to validate each form separately DEPENDING on what the user fills. So basically the user must fill only ONE form and NOT both of them...SO basically if the user fills up form number 1, the validation will be on form 1 ONLY..
Below please find the code of both forms:
<form action="/registration.flow" method="post" id="formElem1" name="formElem1" autocomplete='off'>
<label for="Name_First">First Name:</label>
<input type="text" name="Name_First" id="Name_First" value="" class="required" maxlength="128" />
<label for="Name_Last">Last Name:</label>
<input type="text" name="Name_Last" id="Name_Last" value="" class="required" maxlength="128" />
<button id="registerButton" type="submit">Register</button>
</form>
<form action="/registration.flow" method="post" id="formElem2" name="formElem2" autocomplete='off'>
<label for="Name_First">First Name:</label>
<input type="text" name="Name_First" id="Name_First" value="" class="required" maxlength="128" />
<label for="Name_Last">Last Name:</label>
<input type="text" name="Name_Last" id="Name_Last" value="" class="required" maxlength="128" />
<button id="registerButton" type="submit">Register</button>
</form>
Can someone help me please?
You don't need jQuery specifically to do this. Simple javascript is fine. Call a separate function for the onSubmit of each form.
onSubmit="return validateForm1(this);"
and -
onSubmit="return validateForm2(this);"
Make sure you return true or false depending on if the form passed or failed the validation.
I recommend you the jquery validator . It's easy to use and you can do the two validations separately.

Categories