Angular - Reactive Forms - Login Form #27
akash-coded
started this conversation in
Tasks
Replies: 4 comments
-
|
html file <html>
<body>
<main class="col-md-5 mx-auto mt-4">
<header class="text-center">
<h1 class="display-4 text-primary text-uppercase">Log-In</h1>
</header>
<hr />
<section>
<form
[formGroup]="loginForm"
(ngSubmit)="saveData()"
method="GET"
class="font-weight-bold"
>
<!-- NAME -->
<div id="name" name="name" class="form-group">
<label for="fname">Name*</label>
<input
type="text"
class="form-control"
autocomplete="off"
placeholder="enter your name"
formControlName="name"
/>
<div
*ngIf="loginForm.hasError('required', 'name')"
class="text-danger"
>
Name is required
</div>
<div
*ngIf="loginForm.hasError('pattern', 'name')"
class="text-danger"
>
Name feild allows only characters
</div>
</div>
<!-- Email -->
<div class="form-group">
<label for="email">Email*</label>
<input
type="email"
class="form-control"
placeholder="abc@xyz.com"
autocomplete="off"
formControlName="email"
/>
<div
*ngIf="loginForm.hasError('required', 'email')"
class="text-danger"
>
Email is required
</div>
<div
*ngIf="loginForm.hasError('email', 'email')"
class="text-danger"
>
Email must be a valid email address
</div>
</div>
<!-- Password -->
<div class="form-group">
<label for="password">Password*</label>
<input
type="password"
class="form-control"
placeholder="Type Password"
formControlName="password"
/>
<div
*ngIf="loginForm.hasError('required', 'password')"
class="text-danger"
>
Password is required
</div>
<div
*ngIf="loginForm.hasError('pattern', 'password')"
class="text-danger"
>
<ul style="padding: 0; list-style: inside">
<li>Password should be between 8-16 characters</li>
<li>
Password should contain both lowercase and uppercase alphabets
</li>
<li>Password should contain at least one special symbol</li>
</ul>
</div>
</div>
<!-- Register -->
<div class="row form-group">
<input
type="button"
value="Populate"
class="btn btn-primary col-lg-3"
(click)="populateData()"
/>
<input
type="button"
value="Clear"
class="btn btn-warning col-lg-3"
(click)="clearData()"
/>
<input
type="submit"
value="Login"
class="btn btn-success col-lg-3"
[disabled]="!loginForm.valid"
/>
</div>
</form>
<br />
<div class="card card-body bg-secondary text-light">
{{ loginForm.value | json }}
</div>
</section>
</main>
</body>
</html>ts file import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl,FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'app-reactive-login-form',
templateUrl: './reactive-login-form.component.html',
styleUrls: ['./reactive-login-form.component.css']
})
export class ReactiveLoginFormComponent implements OnInit {
loginForm: FormGroup;
submitted: boolean = false;
constructor(private formBuilder:FormBuilder) {
this.loginForm = new FormGroup({
name: new FormControl(),
email: new FormControl(),
password: new FormControl(),
});
}
saveData() {
console.log(this.loginForm.value);
}
populateData() {
this.loginForm.setValue({
name: 'Annapurna Pichuka',
email: 'purna.pichuka@gmail.com',
password: 'Xyz@W3pqr',
});
}
clearData() {
this.loginForm.setValue({
name: null,
email: null,
password: null
});
}
ngOnInit(): void {
this.loginForm = this.formBuilder.group({
name:['',[Validators.required, Validators.pattern('^[a-zA-Z ]*$')]],
email:['',[Validators.required, Validators.email]],
password:['',[Validators.required, Validators.pattern("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&].{6,}$")]]
})
}
}css file .form-control.ng-untouched.ng-invalid{
border: 1px solid red;
}
.disabled{
border: 1px solid red;
}
.btn{
margin-left: 30px;
}
Using Populate
|
Beta Was this translation helpful? Give feedback.
0 replies
-
html file<hr>
<div class="container">
<h2 class="text-center">Login form</h2>
<div class="row mt-5">
<div class="col-lg-3"></div>
<div class="col-lg-6">
<form [formGroup] = "reactiveForm" (ngSubmit) = "onFormSubmit()">
<div class="form-group row">
<label for="email" class="col-sm-2 col-form-label">email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" formControlName = "email" placeholder="email">
<div>
<span class="error"
*ngIf = "reactiveForm.get('email').touched && reactiveForm.get('email').invalid"
style="color: red;">Please enter a valid Email id</span>
</div>
</div>
</div>
<div class="form-group row">
<label for="last" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="last" formControlName = "password" placeholder="password">
<div
*ngIf = "reactiveForm.get('password').touched && reactiveForm.get('password').invalid"
style="color: red;">
Enter a valid password
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10 text-center">
<button type="submit" class="btn btn-primary m-1" [disabled] = "!reactiveForm.valid">Sign in</button>
<button type="button" class="btn btn-primary m-1" (click) = "populateData()">populate data</button>
<button type="button" class="btn btn-primary m-1" (click) = "clearData()">clear</button>
<button type="button" class="btn btn-primary m-1" (click) = "validate()" >validate data</button>
</div>
</div>
</form>
<div *ngIf = "formSubmitted">
<p>email : {{reactiveForm.value.email}}</p>
<p>pass : {{reactiveForm.value.password}}</p>
</div>
</div>
<div class="col-lg"></div>
</div>
</div>ts fileimport { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validator, Validators } from '@angular/forms';
@Component({
selector: 'app-reactive-forms',
templateUrl: './reactive-forms.component.html',
styleUrls: ['./reactive-forms.component.css']
})
export class ReactiveFormsComponent implements OnInit {
reactiveForm : FormGroup;
formSubmitted : boolean = false;
constructor() { }
ngOnInit(): void {
this.reactiveForm = new FormGroup({
email: new FormControl(null, [Validators.required, Validators.pattern("^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$")]),
password : new FormControl(null, [Validators.required, Validators.pattern("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&].{8,}$")])
})
}
onFormSubmit(){
console.log(this.reactiveForm.value)
this.formSubmitted = true
}
populateData(){
this.reactiveForm.setValue({
email:'rakesh@gmail.com',
password : 'ZXyz@12334'
})
}
clearData(){
this.reactiveForm.setValue({
email: '',
password : ''
})
}
validate(){
if(this.reactiveForm.valid){
alert("form is validated")
}else{
alert("form is not validated")
}
}
}
|
Beta Was this translation helpful? Give feedback.
0 replies
-
HTML FILE
<h1>User Registration Form</h1>
<br />
<form class="ml-4" [formGroup]="userForm" (ngSubmit)="saveData()">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="name">Name</label>
<input
[class.is-invalid]="userName?.invalid && userName?.touched"
type="text"
class="form-control"
id="name"
name="name"
formControlName="name"
/>
<!-- <small [class.d-none]="userForm.get('name')?.valid || userForm.get('name')?.untouched" class="text-danger">name is required</small> -->
<div *ngIf="userName?.invalid && userName?.touched">
<small *ngIf="userName?.errors?.required" class="text-danger">name is required</small>
<small *ngIf="userName?.errors?.minlength" class="text-danger">name must be atleast 3 characters</small>
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<input
[class.is-invalid]="userEmail?.invalid && userEmail?.touched"
type="email"
class="form-control"
id="email"
name="email"
formControlName="email"
/>
<div *ngIf="userEmail?.invalid && userEmail?.touched">
<small *ngIf="userEmail?.errors?.required" class="text-danger">email is required</small>
<small *ngIf="userEmail?.errors?.pattern" class="text-danger">Email must be a valid email address</small>
</div>
</div>
<div class="form-group">
<div class="form-check form-check-inline">
<input
type="radio"
class="form-check-input"
name="gender"
id="gender_Male"
value="male"
formControlName="gender"
/>
<label class="form-check-label" for="gender_Male">Male</label>
</div>
<div class="form-check form-check-inline">
<input
type="radio"
class="form-check-input"
name="gender"
id="gender_Female"
value="female"
formControlName="gender"
/>
<label class="form-check-label" for="gender_Female">Female</label>
</div>
<div class="form-group mt-2">
<label for="paymentMode">Payment Mode</label>
<select
class="form-control"
id="paymentMode"
formControlName="paymentType"
>
<option>Monthly</option>
<option>Quarterly</option>
<option>Yearly</option>
</select>
</div>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="enable_notification"
name="notification"
formControlName="notification"
/>
<label class="form-check-label" for="enable_notification">
Enable Notification
</label>
</div>
<div class="form-group row mt-2">
<div class="col-sm-5">
<button
type="button"
class="btn btn-success"
(click)="populateData()"
>
Populate
</button>
</div>
<div class="col-sm-5">
<button type="button" class="btn btn-warning" (click)="clearData()">
Clear
</button>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<input type="submit" class="btn btn-primary" value="Register"/>
</div>
</div>
<div class="form-group row">
<div class="col-sm-11">
<input
type="submit"
value="Login"
class="btn btn-success col-lg-3"
[disabled]="!userForm.valid"
/>
</div>
</div>
</div>
</div>
</div>
{{userForm.value | json}}
</form>
TS FILE
import { Component, OnInit } from '@angular/core';
import { Validators,FormBuilder } from '@angular/forms';
@Component({
selector: 'app-registration-form',
templateUrl: './registration-form.component.html',
styleUrls: ['./registration-form.component.css'],
})
export class RegistrationFormComponent implements OnInit {
// constructor() {
// this.userForm = new FormGroup({
// name: new FormControl(),
// email: new FormControl(),
// gender: new FormControl(),
// paymentType: new FormControl(),
// notification: new FormControl(),
// });
// }
constructor(private fb: FormBuilder)
{
}
get userName()
{
return this.userForm.get('name');
}
get userEmail()
{
return this.userForm.get('email');
}
userForm=this.fb.group({
name:['', [Validators.required,Validators.minLength(3)]],
email:['', [Validators.required, Validators.pattern("^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$")]],
gender:[''],
paymentType:[''],
notification:[false]
})
ngOnInit(): void {}
saveData() {
console.log(this.userForm.value);
}
populateData() {
this.userForm.setValue({
name: 'Akash',
email: 'akash@xyz.com',
gender: 'male',
paymentType: 'Yearly',
notification: false,
});
}
clearData() {
this.userForm.setValue({
name: '',
email: '',
gender: '',
paymentType: '',
notification: false,
});
}
} |
Beta Was this translation helpful? Give feedback.
0 replies
-
<div class="container">
<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-8">
<form [formGroup]="loginForm" (ngSubmit)="loginUser()">
<div class="container">
<div class="text-center mt-3">
<h2>Registration</h2>
<hr style="margin-top: 36px">
</div>
<div class="form-row mt-4">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" name="email" formControlName="user">
<div>
<span class="error" *ngIf="loginForm.get('user')?.touched && loginForm.get('user')?.invalid"
style="color: red;">enter vaild email id</span>
</div>
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" formControlName="password">
<!-- <div>
<span class="error" *ngIf="loginForm.get('password')?.touched && loginForm.get('password')?.invalid"
style="color: red;">enter vaild password</span>
</div> -->
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St"
formControlName="address">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity" formControlName="city">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control" formControlName="state">
<option selected>Choose...</option>
<option>Bihar</option>
<option>Utter-Pradesh</option>
<option>Madhya-Pradesh</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip" formControlName="zip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck" formControlName="checkBox">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<div style="text-align: center;">
<!-- Button trigger modal -->
<button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Login</button>
<button type="button" class="btn btn-primary te" style="margin-left: 10px;"
(click)="populate()">Populate</button>
<button type="reset" class="btn btn-primary te" style="margin-left: 10px;" (click)="reset()">Reset</button>
</div>
</div>
</form>
</div>
<div class="col-lg-2"></div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div *ngIf="buttonClick">
<div class="container text-center">
<p>Email : {{loginForm.value.user}}</p>
<p>Password : {{loginForm.value.password}}</p>
<p>Address : {{loginForm.value.address}}</p>
<p>City : {{loginForm.value.city}}</p>
<p>State : {{loginForm.value.state}}</p>
<p>Zip-Code : {{loginForm.value.zip}}</p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators, Validator } from '@angular/forms'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'login-reactive-form';
loginForm !: FormGroup;
buttonClick: boolean = false;
constructor() {
this.loginForm = new FormGroup({
user: new FormControl(null, [Validators.required, Validators.pattern("^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$")]),
password: new FormControl(null, [Validators.required, Validators.pattern("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&].{6,}$")]),
address: new FormControl(null),
city: new FormControl(null),
state: new FormControl(null),
zip: new FormControl(null),
checkBox: new FormControl(null),
})
}
ngOnInit(): void {
}
loginUser() {
console.warn(this.loginForm.value)
this.buttonClick = true
}
populate() {
this.loginForm = new FormGroup({
user: new FormControl('amit@hotmail.com'),
password: new FormControl('abc'),
address: new FormControl('Patna'),
city: new FormControl('Patna'),
state: new FormControl('Bihar'),
zip: new FormControl('800003'),
checkBox: new FormControl(''),
})
}
reset() {
this.loginForm = new FormGroup({
user: new FormControl(''),
password: new FormControl(''),
address: new FormControl(''),
city: new FormControl(''),
state: new FormControl(''),
zip: new FormControl(''),
checkBox: new FormControl(''),
})
}
} |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Create the following reactive form with Angular. (You can use Bootstrap for styling)
The form should also have:
Beta Was this translation helpful? Give feedback.
All reactions