Discussion :

[flamant]

Bonjour, je développe une application angular. J'ai implementé un composant de dialogue qui est le suivant:

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
    import { Component, OnInit, Inject } from '@angular/core';
    import {MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
    import { FormGroup, FormControl, Validators } from '@angular/forms';
    import {MAT_RADIO_DEFAULT_OPTIONS } from '@angular/material';
 
    @Component({
      selector: 'app-user-dialog',
      templateUrl: './user-dialog.component.html',
      styleUrls: ['./user-dialog.component.scss'],
      providers: [
        {provide: MAT_RADIO_DEFAULT_OPTIONS, useValue: { color: 'accent' }},
        { provide: MatDialogRef, useValue: {} }
        // ,{ provide: MAT_DIALOG_DATA, useValue: [] }
      ]
    })
    export class UserDialogComponent implements OnInit {
 
 
      public form: FormGroup;
 
      private validateAreEqual(fieldControl: FormControl) {
        return fieldControl.value === this.form.get('password').value ? null : {
            NotEqual: true
        };
      }
 
      constructor(
        private dialogRef: MatDialogRef<UserDialogComponent>,
        @Inject(MAT_DIALOG_DATA) data) {
         }
 
      ngOnInit() {
        this.form = new FormGroup({
          gender: new FormControl('', Validators.required),
          lastName: new FormControl('', Validators.required),
          firstName: new FormControl('', Validators.required),
          email: new FormControl('', Validators.compose([Validators.email, Validators.required])),
          password: new FormControl('', Validators.compose([Validators.required, Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&].{8,}')])),
          // tslint:disable-next-line: max-line-length
          confirmPassword: new FormControl('', Validators.compose([Validators.required, Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&].{8,}'), this.validateAreEqual.bind(this)]))
        });
      }
 
      save() {
        this.dialogRef.close(this.form.value);
      }
 
      close() {
        this.dialogRef.close();
      }
 
    }

Je l'appelle depuis une méthode d'un autre composant:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    openDialog() {
      console.log('ca passe');
      const dialogConfig = new MatDialogConfig();
      dialogConfig.disableClose = true;
      dialogConfig.autoFocus = true;
      dialogConfig.position = {
        top:  '0',
        right: '0'
      };
      dialogConfig.width = '50%' ;
      dialogConfig.height = '350px' ;
      console.log(dialogConfig);
      this.dialog.open(UserDialogComponent, dialogConfig);
    }

Mais j'ai l'erreur suivante:

ERROR NullInjectorError: "StaticInjectorError(AppModule)[UserDialogComponent -> FormGroup]:
StaticInjectorError(Platform: core)[UserDialogComponent -> FormGroup]:
NullInjectorError: No provider for FormGroup!"

Pouvez vous m'aider ?

[flamant]

Bonjour, finalement, j'ai trouvé une manière d'instancier FormGroup. Voici la solution solution

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
 
    export class UserDialogComponent implements OnInit {
 
 
      public dialogFormGroup: FormGroup;
 
 
 
      constructor(
        private formBuilder: FormBuilder,
        private dialogRef: MatDialogRef<UserDialogComponent>,
        @Inject(MAT_DIALOG_DATA) data) {
         }
 
      ngOnInit() {
        this.dialogFormGroup = this.formBuilder.group({
          gender: ['', Validators.required],
          lastName: ['', Validators.required],
          firstName: new FormControl('', Validators.required),
          email: ['', Validators.compose([Validators.email, Validators.required])],
          password: ['', Validators.compose([Validators.required, Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&].{8,}')])],
          // tslint:disable-next-line: max-line-length
          confirmPassword: ['', Validators.compose([Validators.required, Validators.pattern('(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&].{8,}'), this.validateAreEqual.bind(this)])]
        });
      }

Pouvez vous m'expliquer pourquoi j'ai besoin d'un FormBuilder et ne peux pas directement instancier FormGroup ( new FormGroup({...