Discussion :

[Sonia_]

Bonjour,
Je travaille sur mon premier petit projet avec angular. Mais, j'ai rencontré un problème dans mon formulaire. Je veux ajouter une vérification sur les champs mais ça n'a pas marché. L'enregistrement dans ma base de données se fait sans faire la vérification et même si les champs sont vides, l'enregistrement est bien valide !!!
Je veux que l'enregistrement ne se fait que si l'email soit valide, le mot de passe soit composé par au moins 8 caractères et le nom ne contient seulement que des lettres.
merci d'avance

register.component.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<h2 class="text-center">Registration</h2>
<div class="row">
  <div class="col-md-3">
  </div>
  <div class="col-md-6 col-md-offset-3">
    <div class="jumbotron">
      <form [formGroup]="angForm" (ngSubmit)="postdata(angForm)" autocomplete="off">
        <div class="form-group">
          <label for="name">Name</label>
          <input type="text" name="name" formControlName="name" autocomplete="off" class="form-control input-sm" placeholder="Name">
        </div>
        <div class="form-group">
          <label for="email">Email</label>
          <input type="email" name="email" formControlName="email" autocomplete="off" class="form-control input-sm" placeholder="Email">
        </div>
        <div class="form-group">
          <label for="Password">Password</label>
          <input type="password" name="Password" formControlName="password" autocomplete="off" class="form-control input-sm" placeholder="Password">
        </div>
        <button type="submit" class="btn btn-success">Register</button>
      </form>
    </div>
  </div>
  <div class="col-md-3">
  </div>
</div>

register.component.ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import {
  Component,
  OnInit
}
from '@angular/core';
import {
  FormGroup,
  FormControl,
  FormBuilder,
  Validators,
  NgForm
}
from '@angular/forms';
import {
  first
}
from 'rxjs/operators';
import {
  Router
}
from '@angular/router';
import {
  ApiService
}
from '../api.service';
 
@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
 
export class RegisterComponent implements OnInit {
  angForm: FormGroup;
  constructor(private fb: FormBuilder, private dataService: ApiService, private router: Router) {
    this.angForm = this.fb.group({
      email: ['', [Validators.required, Validators.minLength(1), Validators.email]],
      password: ['', Validators.required],
      name: ['', Validators.required],
      mobile: ['', Validators.required]
    });
  }
 
  ngOnInit() {}
 
  postdata(angForm1: any) {
    this.dataService.userregistration(angForm1.value.name, angForm1.value.email, angForm1.value.password)
      .pipe(first())
      .subscribe(
        data => {
          this.router.navigate(['login']);
        },
 
        error => {});
  }
 
  get email() {
    return this.angForm.get('email');
  }
  get password() {
    return this.angForm.get('password');
  }
  get name() {
    return this.angForm.get('name');
  }
}

register.php

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
include_once "database.php";
$postdata = file_get_contents("php://input");
if (isset($postdata) && !empty($postdata)) {
    $request = json_decode($postdata);
    $name = trim($request->name);
    $pwd = mysqli_real_escape_string($mysqli, trim($request->pwd));
    $email = mysqli_real_escape_string($mysqli, trim($request->email));
    $sql = "INSERT INTO users(name,password,email) VALUES ('$name','$pwd','$email')";
    if ($mysqli->query($sql) === true) {
        $authdata = [
            "name" => $name,
            "pwd" => "",
            "email" => $email,
            "Id" => mysqli_insert_id($mysqli),
        ];
        echo json_encode($authdata);
    }
}
 
?>

api.service.ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import {
  Injectable,
  Output,
  EventEmitter
}
from '@angular/core';
import {
  map
}
from 'rxjs/operators';
import {
  HttpClient
}
from '@angular/common/http';
import {
  Users
}
from './users';
 
@Injectable({
  providedIn: 'root'
})
 
export class ApiService {
  redirectUrl: string;
  baseUrl: string = "http://localhost/angular_admin/php";
  @Output() getLoggedInName: EventEmitter < any > = new EventEmitter();
  constructor(private httpClient: HttpClient) {}
  public userlogin(username: any, password: any) {
    alert(username)
    return this.httpClient.post < any > (this.baseUrl + '/login.php', {
        username,
        password
      })
      .pipe(map(Users => {
        this.setToken(Users[0].name);
        this.getLoggedInName.emit(true);
        return Users;
      }));
  }
 
  public userregistration(name: any, email: any, pwd: any) {
    return this.httpClient.post < any > (this.baseUrl + '/register.php', {
        name,
        email,
        pwd
      })
      .pipe(map(Users => {
        return Users;
      }));
  }
 
  //token
  setToken(token: string) {
    localStorage.setItem('token', token);
  }
  getToken() {
    return localStorage.getItem('token');
  }
  deleteToken() {
    localStorage.removeItem('token');
  }
  isLoggedIn() {
    const usertoken = this.getToken();
    if (usertoken != null) {
      return true
    }
    return false;
  }
}

[duke666]

https://stackblitz.com/edit/angular1...p.component.ts

https://stackblitz.com/edit/angular-...p.component.ts

[Sonia_]

Bonjour,
merci pour votre réponse
J'ai essayé de corriger mon code mais j'ai obtenu ces erreurs

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
Property 'dataService' does not exist on type 'AppComponent'.
'data' is declared but its value is never read.
Parameter 'data' implicitly has an 'any' type.
Property 'router' does not exist on type 'AppComponent'.
'error' is declared but its value is never read.
Parameter 'error' implicitly has an 'any' type.

register.component.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<h2 class="text-center">Registration</h2>
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6 col-md-offset-3">
<div class="jumbotron">
<form [formGroup]="angForm" autocomplete="off" >
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" formControlName="name" autocomplete="off" class="form-control input-sm"  required minlength="1" maxlength="250" placeholder="Name"
[class.is-invalid]="name.invalid && (name.dirty || name.touched)">
<div *ngIf="name.invalid && (name.dirty || name.touched)" class="invalid-feedback">
  <div *ngIf="name.errors?.['required']">
    This field is required.
  </div>
</div></div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" name="email" formControlName="email" autocomplete="off" required minlength="1" maxlength="250" class="form-control input-sm" placeholder="Email"
[class.is-invalid]="email.invalid && (email.dirty || email.touched)">
<div *ngIf="email.invalid && (email.dirty || email.touched)" class="invalid-feedback">
  <div *ngIf="email.errors?.['required']">
    This field is required.
  </div>
  <div *ngIf="!email.errors?.['required'] && email.errors?.['emailValidator']">
    Invalid email format.
  </div>
</div></div>
<div class="form-group">
<label for="Password">Password</label>
<input type="password" name="Password" formControlName="password"  required minlength="15" autocomplete="off" class="form-control input-sm" placeholder="Password"
[class.is-invalid]="password.invalid && (password.dirty || password.touched)">
            <button type="button" class="btn btn-outline-secondary" (click)="user.showPassword = !user.showPassword">
              <i class="bi" [ngClass]="{'bi-eye-fill': !user.showPassword, 'bi-eye-slash-fill': user.showPassword}"></i>
            </button>
            <div *ngIf="password.invalid && (password.dirty || password.touched)" class="invalid-feedback">
              <div *ngIf="password.errors?.['required']">
                This field is required.
              </div>
              <div *ngIf="password.errors?.['minlength']">
                This field must have at least 8 characters.
              </div>
            </div></div>
<button type="submit" class="btn btn-success"  (click)="validate(angForm1)">Register</button>
</form>
</div>
</div>
<div class="col-md-3">
</div>
</div>

register.component.ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, Validators, NgForm, AbstractControl} from '@angular/forms';
import { first } from 'rxjs/operators';
import { Router } from '@angular/router';
import { ApiService } from '../api.service';
import { emailValidator } from './email-validator.directive';
 
interface IUser {
  name: string;
  email: string;
  password: string;
}
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
 
  angForm!: FormGroup;
  user: IUser;
 
  constructor() {
    this.user = {} as IUser;
  }
 
  ngOnInit(): void {
    this.angForm = new FormGroup({
      name: new FormControl(this.user.name, [
        Validators.required
      ]),
      email: new FormControl(this.user.email, [
        Validators.required,
        EmailValidator,
      ]),
      password: new FormControl(this.user.password, [
        Validators.required,
        Validators.minLength(8),
      ]),
    });
  }
 
  get name() {
    return this.angForm.get('name')!;
  }
 
  get email() {
    return this.angForm.get('email')!;
  }
 
  get password() {
    return this.angForm.get('password')!;
  }
 
  public validate(angForm1:any): void {
    if (this.angForm.invalid) {
      for (const control of Object.keys(this.angForm.controls)) {
        this.angForm.controls[control].markAsTouched();
      }
      return;
    }
    else{
      this.dataService.userregistration(angForm1.value.name,angForm1.value.email,angForm1.value.password)
      .pipe(first())
      .subscribe(
        data => {
          this.router.navigate(['login']);
        },
 
        error => {
        });
      }
      this.user = this.angForm.value;
      console.info('Name:', this.user.name);
      console.info('Email:', this.user.email);
      console.info('Password:', this.user.password);
  }
}