Discussion :

[e-coach.individuel]

Bonjour à tous,

j'ai l'erreur suivante "ERROR TypeError: Cannot read property 'addUser' of undefined" lorsque je veux accéder à la fonction addUser depuis le fichier "auth.component.ts"

Pour information mon fichier :

User.model.ts:

Code :

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

1
2
3
4
5
export class User{
    constructor(public login: string,
                public Mdp : string){
    }
}

user.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
import 'rxjs/RX';
import { User } from '../models/User.model';
import { Subject } from 'rxjs';
 
 
export class UserService {
  private users!: User[];
  userSubject = new Subject<User[]>();
 
  constructor(private userService: UserService) {
  }
 
  emitUsers() {
    this.userSubject.next(this.users.slice());
  }
 
  addUser(user: User) {
      this.users.push(user);
      this.emitUsers();
  }
}

auth.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
import { ThisReceiver } from '@angular/compiler';
import 'rxjs/RX';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms';
import { Router } from '@angular/router';
 
import { User } from '../models/User.model';
import { Subscription } from 'rxjs/Subscription';
import { UserService } from '../services/user.Service';
 
 
@Component({
  selector: 'app-auth',
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.scss']
})
export class AuthComponent implements OnInit, OnDestroy {
 
  users: User[] = [];
 
  userSubscription: Subscription = new Subscription;
  userService!: UserService;
  userForm!: FormGroup;
 
  constructor( private formBuilder: FormBuilder,
              private router : Router) {}
 
  ngOnInit() {
    this.initForm();
  }
 
  initForm(){
    this.userForm = this.formBuilder.group({
      login:['',Validators.required],
      Mdp:['',Validators.required],
    });
  }
 
  onSubmitForm(){
    const formValue= this.userForm.value;
    const newUser = new User (
      formValue['login'],
      formValue['Mdp']
    );
 
      console.log(newUser);
 
    this.userService.addUser(newUser);
  }
 
  ngOnDestroy() {
    this.userSubscription.unsubscribe();
  }
 
}

auth.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
<div class="col-sm-b col-sm-offset-2">
    <form [formGroup]="userForm" (ngSubmit)="onSubmitForm()">
        <div class="form-group">
            <label for="login">login</label>
            <input type="text" class="form-control" id="login" formControlName="login">
        </div>
 
        <div class="form-group">
            <label for="Mdp">Mdp</label>
            <input type="text" class="form-control" id="Mdp" formControlName="Mdp">
        </div>
 
      <button type="submit" class="btn btn-primary" [disabled]="userForm.invalid">Soumettre</button>
    </form>
 
    </div>
 
    <ul class="list-group">
        <li class="list-group-item" *ngFor="let user of users">
          <h3>{{ user.login }} {{ user.Mdp }}</h3>
        </li>
    </ul>

Merci pour votre aide.

[krakatoa]

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
import { ThisReceiver } from '@angular/compiler';
import 'rxjs/RX';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormArray } from '@angular/forms';
import { Router } from '@angular/router';
 
import { User } from '../models/User.model';
import { Subscription } from 'rxjs/Subscription';
import { UserService } from '../services/user.Service';
 
 
@Component({
  selector: 'app-auth',
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.scss']
})
export class AuthComponent implements OnInit, OnDestroy {
 
  users: User[] = [];
 
  userSubscription: Subscription = new Subscription;
  userService!: UserService;                  // supprimer cette ligne
  userForm!: FormGroup;
 
  constructor( 
              private formBuilder: FormBuilder,
              private router : Router,
              private userService: UserService                     // ajouter cette ligne
) {}
 
  ngOnInit() {
    this.initForm();
  }
 
  initForm(){
    this.userForm = this.formBuilder.group({
      login:['',Validators.required],
      Mdp:['',Validators.required],
    });
  }
 
  onSubmitForm(){
    const formValue= this.userForm.value;
    const newUser = new User (
      formValue['login'],
      formValue['Mdp']
    );
 
      console.log(newUser);
 
    this.userService.addUser(newUser);
  }
 
  ngOnDestroy() {
    this.userSubscription.unsubscribe();
  }
 
}

de plus, comme tu n'a pas précisé de décorateur service en root dans le service : UserService
j'imagine que tu as déclaré : UserService dans le module du composant comme ceci : providers: [UserService ]

[e-coach.individuel]

Merci pour ton aide.

Effectivement, je n'avais pas déclaré le service dans app.module.ts

Par contre, je ne comprends pas pourquoi j'ai ce message d'erreur:

ERROR Error: Uncaught (in promise): Error: NG0200: Circular dependency in DI detected for UserService.

auth.component utilise les classes User et userService
userService.Component utilise la classe User

je ne vois pas pourquoi j'ai ce problème de "Circular dependency"

[youtpout978]

Pourquoi tu as :

Code :

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

1
2
  constructor(private userService: UserService) {
  }

dans ton UserService tu inject le service dans lui même

[e-coach.individuel]

effectivement, ça ne peut pas fonctionner.

Merci,