Skip to content

Commit 5213bed

Browse files
iamsaquib8iamsaquib8
committed
form builder adding
1 parent 212d167 commit 5213bed

6 files changed

Lines changed: 114 additions & 105 deletions

File tree

‎codecamp-front/src/app/app.module.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { BrowserModule } from '@angular/platform-browser';
22
import { NgModule } from '@angular/core';
33
import { RouterModule, Routes} from '@angular/router';
4-
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
4+
import { ReactiveFormsModule} from '@angular/forms';
55
import { AppRoutingModule } from './app-routing.module';
66
import {FormControl, FormGroup} from '@angular/forms';
77

@@ -36,8 +36,8 @@ import { HttpModule } from '@angular/http';
3636
],
3737
imports: [
3838
BrowserModule,
39-
FormsModule,
4039
HttpModule,
40+
ReactiveFormsModule,
4141
AppRoutingModule
4242
],
4343
providers: [ValidateService, AuthService],

‎codecamp-front/src/app/components/login/login.component.html‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +0,0 @@
1-
<h2 class="page-header">Login</h2>
2-
<form (submit)="onLoginSubmit()">
3-
<div class="form-group">
4-
<label>Username</label>
5-
<input type="text" class="from-control" [(ngModel)]="username" name="username" >
6-
</div>
7-
<div class="form-group">
8-
<label>Password</label>
9-
<input type="password" class="from-control" [(ngModel)]="password" name="password">
10-
</div>
11-
<input type="submit" class='btn btn-primary' value="login">
12-
</form>

‎codecamp-front/src/app/components/register/register.component.html‎

Lines changed: 72 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,83 @@
1-
<h2 class="page-header">
1+
<h2 class="display-4">
22
Register
33
</h2>
4-
<form (submit)="onRegisterSubmit()">
5-
<div class="form-group">
6-
<label for="name">Name</label>
7-
<input type="text" name="name" [(ngModel)]="name" class="form-control" id="name" placeholder="Enter name(XYZ)">
8-
</div>
4+
<div class="container">
5+
<form [formGroup]="form" (submit)="onSignupSubmit()">
6+
<div class="form-group">
7+
<label for="name">Name</label>
8+
<input type="text"
9+
name="name"
10+
formControlName="name"
11+
class="form-control"
12+
placeholder="Enter Name"
13+
autocomplete="off"
14+
[ngClass]="{'is-invalid': (form.controls.name.errors && form.controls.name.dirty) , 'is-valid': !form.controls.name.errors}">
15+
</div>
916

10-
<div class="form-group">
11-
<label for="username">Username</label>
12-
<input type="text" [(ngModel)]="username" name="username" class="form-control" id="username" placeholder="Enter username(XYZ)">
13-
</div>
17+
<div class="form-group">
18+
<label for="username">Username</label>
19+
<input type="text"
20+
name="username"
21+
formControlName="username"
22+
class="form-control"
23+
placeholder="Enter username(XYZ)"
24+
autocomplete="off"
25+
[ngClass]="{'is-invalid': (form.controls.username.errors && form.controls.username.dirty) , 'is-valid': !form.controls.username.errors}">
26+
</div>
1427

28+
<!-- Email Input -->
1529
<div class="form-group">
16-
<label for="email_id">Email</label>
17-
<input type="email" [(ngModel)]="email_id" name="email_id" class="form-control" id="email_id" placeholder="Enter email-id(xyz@abc.com)">
18-
</div>
19-
20-
<div class="form-group">
21-
<label for="college">College</label>
22-
<input type="text" [(ngModel)]="college" name="college" class="form-control" id="college" placeholder="Enter college name">
30+
<label for="email">Email</label>
31+
<input type="text"
32+
name="email"
33+
class="form-control"
34+
[ngClass]="{'is-invalid': (form.controls.email.errors && form.controls.email.dirty) , 'is-valid': !form.controls.email.errors}"
35+
autocomplete="off"
36+
placeholder="*Email"
37+
formControlName="email"
38+
(blur)="checkEmail()">
39+
<!-- Validation -->
40+
<div *ngIf="form.controls.email.errors?.required && form.controls.email.dirty" class="invalid-feedback">This Field is required</div>
41+
<div class="invalid-feedback" *ngIf="(form.controls.email.errors?.minlength && form.controls.email.dirty || form.controls.email.errors?.maxlength && form.controls.email.dirty ) && form.controls.email.dirty">Minimum characters: 5, Maximum characters: 30</div>
42+
<div class="invalid-feedback" *ngIf="form.controls.email.errors?.validateEmail && form.controls.email.dirty">This must be a valid e-mail</div>
2343
</div>
44+
45+
<div class="form-group">
46+
<label for="college">College</label>
47+
<input type="text"
48+
name="college"
49+
formControlName="college"
50+
class="form-control"
51+
placeholder="Enter college name"
52+
autocomplete="off"
53+
[ngClass]="{'is-invalid': (form.controls.college.errors && form.controls.college.dirty) , 'is-valid': !form.controls.college.errors}">
54+
</div>
2455

25-
<div class="form-group">
26-
<label for="city">City</label>
27-
<input type="text" [(ngModel)]="city" name="city" class="form-control" id="city" placeholder="Enter city">
28-
</div>
29-
30-
<div class="form-group">
31-
<label for="dob">Date Of Birth</label>
32-
<input type="date" [(ngModel)]="dob" name="dob" class="form-control" id="dob">
33-
</div>
56+
<div class="form-group">
57+
<label for="city">City</label>
58+
<input type="text" name="city" formControlName="city" class="form-control" placeholder="Enter city" autocomplete="off">
59+
</div>
60+
61+
<div class="form-group">
62+
<label for="dob">Date Of Birth</label>
63+
<input type="date" name="dob" formControlName="dob" class="form-control" autocomplete="off">
64+
</div>
3465

35-
<div class="form-group">
36-
<label for="gender">Gender</label>
37-
<input type="text" [(ngModel)]="gender" name="gender" class="form-control" id="gender" placeholder="Male/Female">
38-
</div>
66+
<div class="form-group">
67+
<label for="gender">Gender</label>
68+
<input type="text" name="gender" formControlName="gender" class="form-control" placeholder="Male/Female" autocomplete="off">
69+
</div>
3970

40-
<div class="form-group">
41-
<label for="password">Password</label>
42-
<input type="password" [(ngModel)]="password" name="password" class="form-control" id="password" placeholder="Enter password">
43-
</div>
71+
<div class="form-group">
72+
<label for="password">Password</label>
73+
<input type="password" name="password" formControlName="password" class="form-control" placeholder="Enter password" autocomplete="off">
74+
</div>
4475

45-
<div class="form-group">
46-
<label for="confirmpassword">Confirm Password</label>
47-
<input type="password" [(ngModel)]="confirmpassword" name="confrimpassword" class="form-control" id="confrimpassword" placeholder="Confrim password">
48-
</div>
76+
<div class="form-group">
77+
<label for="confirmpassword">Confirm Password</label>
78+
<input type="password" name="confirm" formControlName="confirm" class="form-control" placeholder="Confrim password" autocomplete="off">
79+
</div>
4980

50-
<input type="submit" class="btn btn-primary" value="SignUp">
51-
</form>
81+
<input type="submit" class="btn btn-primary" value="Sign up">
82+
</form>
83+
</div>

‎codecamp-front/src/app/components/register/register.component.ts‎

Lines changed: 38 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Component, OnInit } from '@angular/core';
2+
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
23
import { ValidateService } from '../../services/validate.service';
34
import { AuthService } from '../../services/auth.service';
45
import { Router } from '@angular/router';
@@ -10,64 +11,52 @@ import { Router } from '@angular/router';
1011
})
1112
export class RegisterComponent implements OnInit {
1213

13-
name: string;
14-
username: string;
15-
email_id: string;
16-
college: string;
17-
password: string;
18-
dob: string;
19-
city: string;
20-
joinedOn: string;
21-
gender: string;
22-
confirmpassword: string;
23-
14+
form: FormGroup;
15+
2416
constructor(
2517
private validateService: ValidateService,
2618
private authService: AuthService,
27-
private router: Router
28-
) { }
19+
private router: Router,
20+
private formBuilder: FormBuilder
21+
) {
22+
this.createForm();
23+
}
2924

3025
ngOnInit() {
3126
}
32-
onRegisterSubmit() {
33-
const user = {
34-
name: this.name,
35-
username: this.username,
36-
email_id: this.email_id,
37-
college: this.college,
38-
password: this.password,
39-
joinedOn: '12/10/15',
40-
dob: this.dob,
41-
city: this.city,
42-
gender: this.gender,
43-
confirmpassword: this.confirmpassword
44-
}
4527

46-
//Required Fields
47-
if(!this.validateService.validateRegister(user)){
48-
console.log('Please fill in all fields');
49-
return false;
50-
}
28+
createForm() {
29+
this.form = this.formBuilder.group({
30+
name: '',
31+
email: ['', Validators.compose([
32+
Validators.required, // Field is required
33+
Validators.minLength(5), // Minimum length is 5 characters
34+
Validators.maxLength(30), // Maximum length is 30 characters
35+
this.validateEmail // Custom validation
36+
])],
37+
password: ['', Validators.required],
38+
username: ['', Validators.required],
39+
confirm: ['', Validators.required],
40+
college: ['', Validators.required],
41+
gender: '',
42+
dob: ['', Validators.required],
43+
city: ['', Validators.required]
44+
});
45+
}
5146

52-
if(!this.validateService.validateEmail(user.email_id)){
53-
console.log('Please use a valid email');
54-
return false;
55-
}
56-
if(!this.validateService.validatePassword(user.password,user.confirmpassword)){
57-
console.log('password mismatch');
58-
return false;
47+
validateEmail(controls) {
48+
// Create a regular expression
49+
const regExp = new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
50+
// Test email against regular expression
51+
if (regExp.test(controls.value)) {
52+
return null; // Return as valid email
53+
} else {
54+
return { 'validateEmail': true } // Return as invalid email
5955
}
60-
61-
//Register User
62-
this.authService.registerUser(user).subscribe(data => {
63-
if(data.success){
64-
console.log('User Registered');
65-
this.router.navigate(['/login']);
66-
} else{
67-
console.log('Something wents wrong');
68-
this.router.navigate(['/register']);
69-
}
70-
});
56+
}
57+
58+
59+
onSignupSubmit() {
7160

7261
}
7362

‎server/routes/users.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,4 +78,4 @@ function requiresLogin(req, res, next) {
7878
}
7979

8080

81-
module.exports = router;
81+
module.exports = router;

‎server/utils/db/db.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const mongoose = require('mongoose')
22

33
mongoose.Promise = global.Promise
4-
mongoose.connect(process.env.MONGODB_URI || 'mongodb://localhost:27017/OnlineJudge',{useMongoClient:true})
4+
mongoose.connect(process.env.MONGODB_URI || 'mongodb://localhost:27017/OnlineJudge')
55
module.exports = {
66
mongoose
77
}

0 commit comments

Comments
 (0)