Discussion :

[olivier252]

Bonjour,

Je rencontre cette erreur dans un controller qui gère un formulaire quand je récupère la valeur de chaque champ

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
export class FormBookComponent implements OnInit {
  bookForm!: FormGroup;
 
  constructor(
    private formBuilder: FormBuilder,
    private bookService: BookService,
    private router: Router) { }
 
  ngOnInit(): void {
    this.initFormBook();
  }
 
  initFormBook() {
    this.bookForm = this.formBuilder.group({
        title: ['', Validators.required],
        author: ['', Validators.required]
    })
  }
 
  onSubmitBookForm() {
//erreur ici: Object is possibly 'null'.ts(2531) sur const title et const author
    const title= this.bookForm.get('title').value;
    const author = this.bookForm.get('author').value;
 
..........
}

Je ne comprends pas pourquoi je dois mettre aussi l'opérateur d'assetion "!" non null systématiquement sur toutes les variables de classes (ici "bookForm") alors qu'auparavant je n'avais pas besoin de faire ça. De plus je suppose que ça n'est pas très recommandé en cas de nullité justement

Merci

[dukoid]

enlève le : !


il faut toujours déclarer: ReactiveFormsModule, dans le module du composant
ou s'il n'y en a pas, dans app.module

[olivier252]

Merci pour ta réponse

Le ReactiveFormModule est bien déclaré dans app.module dans mon cas.
Par contre, si j'enlève le "!" angular me demande d'initialiser ce que je n'avais pas à faire avant, il faut dire que je travaillais sur une vieille version d'angular (6)

[krakatoa]

supprime le dossier node_module
npm i

[olivier252]

Salut,

J'ai supprimé le dossier mais rien de concluant j'ai toujours le :

Property 'bookForm' has no initializer and is not definitely assigned in the constructor.ts(2564)

[dukoid]

(1) et avec : this.initFormBook(); dans le constructor ?

(2)
c de l'angular 6 ?

(3)
c'est bien : @angular/forms
import { ReactiveFormsModule } from '@angular/forms';

(4)
sinon essaye le meme code dans un autre composant

[olivier252]

Re,

1/ ne change rien

2/ Je suis sur angular 11, mais j'ai eu des problèmes récemment avec npm 7.5.2 j'ai dû installer la version 6 suite à ce message

Voici ce que donne un petit ng --version :


3/ voici mon import dans app.module

Code :

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

1
2
3
4
5
6
7
8
9
 
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
.................................
imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule
..........................

4/ J'ai créé un autre projet et le problème est le même : voici les solutions proposées par le "quick fix"

[krakatoa]

(1)
bah voilà c'est ça le probleme, la version de node
parceque niveau Angular, il n'y a pas de raison que ça plante.


faut installer node 12, c'est obligatoire. faut te concentrer la dessus..
le JavaScript évolue, les packages également.... faut respecter les recommandations de version

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
|Angular CLI|       Angular      |            NodeJS            |TypeScript |
|-----------|--------------------|------------------------------|-----------|
|-          |2.x                 |6.0.x or later minor          |2.0.x      |
|1.0.6      |4.x                 |6.9.x or later minor          |2.2.x      |
|1.1.3      |4.x                 |6.9.x or later minor          |2.3.x      |
|1.2.7      |4.x                 |6.9.x or later minor          |2.3.x      |
|1.3.2      |4.2.x or later minor|6.9.x or later minor          |2.4.x      |
|1.4.10     |4.2.x or later minor|6.9.x/8.9.x or later minor    |2.4.x      |
|(1.5.6)    |5.0.x               |6.9.x/8.9.x or later minor    |2.4.x      |
|1.5.6      |5.1.x               |6.9.x/8.9.x or later minor    |2.5.x      |
|1.6.7      |5.2.x or later minor|6.9.x/8.9.x or later minor    |2.5.x      |
|1.7.4      |5.2.x or later minor|6.9.x/8.9.x or later minor    |2.5.x      |
|6.0.8      |6.0.x               |8.9.x or later minor          |2.7.x      |
|6.1.5      |6.1.x               |8.9.x or later minor          |2.7.x      |
|6.2.9      |6.1.x               |8.9.x or later minor          |2.9.x      |
|7.0.7      |7.0.x               |8.9.x/10.9.x or later minor   |3.1.x      |
|7.1.4      |7.1.x               |8.9.x/10.9.x or later minor   |3.1.x      |
|7.2.4      |7.2.x               |8.9.x/10.9.x or later minor   |3.2.x      |
|7.3.9      |7.2.x               |8.9.x/10.9.x or later minor   |3.2.x      |
|8.0.6      |8.0.x               |10.9.x or later minor         |3.4.x      |
|8.1.3      |8.1.x               |10.9.x or later minor         |3.4.x      |
|8.2.2      |8.2.x               |10.9.x or later minor         |3.4.x      |
|8.3.25     |8.2.x               |10.9.x or later minor         |3.5.x      |
|9.0.7      |9.0.7               |10.13.x/12.11.x or later minor|3.6.x/3.7.x|
|9.x        |9.x                 |10.13.x/12.11.x or later minor|3.6.x-3.8.x|
|10.x       |10.x                |10.13.x/12.11.x or later minor|3.9.x      |
|10.1.x     |10.1.x              |10.13.x/12.11.x or later minor|3.9.x/4.0.x|
|10.2.x     |10.2.x              |10.13.x/12.11.x or later minor|3.9.x/4.0.x|
|11.0.7     |11.0.x              |10.13.x/12.11.x or later minor|4.0.x      |
|11.1.x     |11.1.x              |10.13.x/12.11.x or later minor|4.0.x/4.1.x|
|11.2.x     |11.2.x              |10.13.x/12.11.x or later minor|4.0.x/4.1.x|

(2)
comment es tu passé de angular 6 à 11 sur ton projet ?

le mieux est de créer un nouveau projet angular 11 et d'y inserer le code angular 6

[olivier252]

Ok, je suis en version 10.19 pour node, ça devrait passer pourtant non ? je vais quand même update. Merci

[krakatoa]

ça devrait le faire en 10.

tu es sous quel os ?



(2)
tester un projet au hasard sur github

par exemple:
git clone https://github.com/cornflourblue/ang...ud-example.git
npm i
ng serve

voir si ça plante ou pas ?

[olivier252]

Pour répondre à ta question, c'est à mon ancien travail que j'étais sous angular 6, du coup mon problème vient d'un PC perso que j'ai mis sous ubuntu et que j'ai voulu configurer pour faire du angular.
Enfin maintenant j'ai ceci :

Mais ce n'est pas mieux. En tt cas la doc ubuntu est super pour installer node je donne le lien à tout hasard :
https://doc.ubuntu-fr.org/nodejs.

En regardant sut stackoverflow il y a une discussion qui à l'air de dire qu'il faut que je change la version du TS utilisée par VS Code. Je vais chercher par là :
https://stackoverflow.com/questions/...n-the-construc

Je vais tester ta sugestion sur le projet github EDIT=> Le projet compile correctement, par contre après désinstall, réinstall de VS code, vérif des versions du ts dans le package-lock.json ras.

[dukoid]

donc avec le projet github ça fonctionne, je ne comprends pas.

repart d'un nouveau projet généré et transfert ton code.

[olivier252]

Oui, c'est bizarre...Je pense que je vais tout désinstall-réinstall ds la journée qd j'aurai une minute : affaire à suivre

EDIT => Problème résolu je viens de voir que j'avais un dossier node qui trainait hors de mon workspace et qui était assez vieux dans le path "/user/includes" du PC(sous linux en tt cas). En le supprimant ça fonctionne.

[olivier252]

Bonjour, je me permets de m'auto répondre car j'ai un élément de réponse sur ce problème que j'avais rencontré (à savoir le "forçage" d'initialisation des variables de classe et l'obligation de mettre l'operateur d'assertion "!" pour signifier que les variables en question étaient obligatoirement "not null"

Le problème vient lorsque l'on lance un nouveau projet (ng new my-newproject)
A un moment donné il demande ceci à la création du projet :



J'avais surement répondu "yes" à l'époque ce qui induisait 'obligation de pallier manuellement en ajoutant "!" au fait que la variable de classe soit potentiellement nulle. Pour rappel j'avais ceci en répondant "yes" :



J'étais contraint de rajouter à toutes les variables de classe l'opérateur d'assertion not null comme ceci :



En répondant "no" à l'option proposée, cela annule tous ces ennuis

Esperant que ce petit complément pourra aider certains newbies comme moi !

[krakatoa]

merci pour cette précision. je n'étais pas au courant....

[dj-youyou]

il faut juste ajouter "strictPropertyInitialization": false au niveau de "compilerOptions" sur le fichier tsconfig.json (pas tsconfig.app.json)