[Angular 5] form réactive , quand cette méthode est appellée ?

**keokaz** · 20/12/2017, 17h57

Bonsoir,
voici un bout de script auquel j'essaye de comprendre:

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
import { Component, OnInit }                  from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ensembleForm: FormGroup;
  contact = { prenom: '' };
 
  ngOnInit(): void {
    this.ensembleForm = new FormGroup({
      'prenom': new FormControl(this.contact.prenom, [
        Validators.required,
        Validators.minLength(4),
      ])
    });
  }
 
  get prenom() { 
    console.log(this);
    return this.ensembleForm.get('prenom');
   }
 
}

Dans ce composant il y a une méthode:

Code :

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

1
2
3
4
  get prenom() { 
    console.log(this);
    return this.ensembleForm.get('prenom');
   }

Quand cette méthode est appelé ? On dirait qu'elle est appelé automatiquement d'habitude dans le html on a ce genre d'appel:

voici mes 3 fichier:
appmodule:

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
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
import { AppComponent } from './app.component';
 
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.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
<div class="container">
 
  <h1>Reactive Form</h1>
 
  <form [formGroup]="ensembleForm" #formDir="ngForm">
    <div [hidden]="formDir.submitted">
 
      <div class="form-group">
        <label for="name">Name</label>
        <input id="name" class="form-control" formControlName="prenom" required>
 
        <div *ngIf="prenom.invalid && (prenom.dirty || prenom.touched)" class="alert alert-danger">
          <div *ngIf="prenom.errors.required">
            prenom is required.
          </div>
          <div *ngIf="prenom.errors.minlength">
            prenom must be at least 4 characters long.
          </div>
        </div>
      </div>
 
      <button type="submit" class="btn btn-default" [disabled]="ensembleForm.invalid">Submit</button>
      <button type="button" class="btn btn-default" (click)="formDir.resetForm({})">Reset</button>
    </div>
  </form>
 
  <div class="submitted-message" *ngIf="formDir.submitted">
    <p>You've submitted your hero, {{ ensembleForm.value.prenom }}!</p>
    <button (click)="formDir.resetForm({})">Add new hero</button>
  </div>
</div>

app.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
import { Component, OnInit }                  from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ensembleForm: FormGroup;
  contact = { prenom: '' };
 
  ngOnInit(): void {
    this.ensembleForm = new FormGroup({
      'prenom': new FormControl(this.contact.prenom, [
        Validators.required,
        Validators.minLength(4),
      ])
    });
  }
 
  get prenom() { 
    console.log(this);
    return this.ensembleForm.get('prenom');
   }
 
}

Dans le code je ne trouve null pas une ligne qui indique de récupérer "prénom",
voici ce que donne console.log(this)

Code :

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

1
2
3
4
5
6
Object { contact: Object, ensembleForm: Object } app.component.ts:26:13
Object { contact: Object, ensembleForm: Object } app.component.ts:26:13
Object { contact: Object, ensembleForm: Object } app.component.ts:26:13
Object { contact: Object, ensembleForm: Object } app.component.ts:26:13
Object { contact: Object, ensembleForm: Object } app.component.ts:26:13
Object { contact: Object, ensembleForm: Object } app.component.ts:26:13