formbuilder angulaire ne peut pas trouver formgroup

Question

J'essaie d'utiliser formbuilder pour réduire un peu de code sur mon composant de formulaire, mais je ne peux pas le faire fonctionner, peu importe ce que je fais, je continue à obtenir 'Ne peut pas Lire la propriété 'invalide' de indéfini ', le code est en bas, est-ce que je manque quelque chose?

component.html

<form [formGroup]="myForm" class="mt-3" (ngSubmit)="onSubmit()" novalidate> 
<fieldset formGroupName="name"> 

    <div class="form-group" [ngClass]="{'has-danger': firstName.invalid && (firstName.dirty || firstName.touched), 'has-success': firstName.valid && (firstName.dirty || firstName.touched)}"> 
     <label>First Name</label> 
     <input type="text" class="form-control" formControlName="firstName"> 
    </div> 

    <div class="form-group" [ngClass]="{'has-danger': lastName.invalid && (lastName.dirty || lastName.touched), 'has-success': lastName.valid && (lastName.dirty || lastName.touched)}"> 
     <label>Last Name</label> 
     <input type="text" class="form-control" formControlName="lastName"> 
    </div> 

</fieldset> 

<div class="form-group" [ngClass]="{'has-danger': email.invalid && (email.dirty || email.touched), 'has-success': email.valid && (email.dirty || email.touched)}"> 
    <label>Email</label> 
    <input type="email" class="form-control" formControlName="email"> 
</div> 


<div class="form-group" [ngClass]="{'has-danger': password.invalid && (password.dirty || password.touched), 'has-success': password.valid && (password.dirty || password.touched)}"> 
    <label>Password</label> 
    <input type="password" class="form-control" formControlName="password"> 
</div> 


<div class="form-group" [ngClass]="{'has-danger': language.invalid && (language.dirty || language.touched), 'has-success': language.valid && (language.dirty || language.touched)}"> 
    <label>Language</label> 
    <select class="form-control" formControlName="language"> 
     <option value="">Please select a language</option> 
     <option *ngFor="let lang of langs" [value]="lang">{{lang}}</option> 
    </select> 
</div> 

<button type="submit" class="btn btn-primary" [disabled]="!myForm.valid">Submit</button> 

component.ts

import { Component, OnInit, AfterViewInit, Pipe } from '@angular/core'; 
import { FormsModule, FormGroup, FormControl, Validators, ReactiveFormsModule, FormBuilder } from '@angular/forms'; 

export class ModelDrivenFormFormModelValidationComponent implements OnInit { 
    langs: string[] = ['English', 'French', 'German']; 

    myForm: FormGroup; 

    constructor(private fb: FormBuilder) { 
     this.createForm(); 
    } 

    createForm() { 
     this.myForm = this.fb.group({ 
      name: this.fb.group({ 
       firstName: ['', [Validators.required]], 
       lastName: ['', [Validators.required]] 
      }), 
      email: ['', [Validators.required, Validators.pattern('[^ @]*@[^@]*')]], 
      password: ['', [Validators.required, Validators.minLength(8)]], 
      language: '' 
     }); 
    } 

    ngOnInit() {} 
} 

Answer 1

Le modèle de composant tente de l'accès aux variables avant qu'il ait été déclaré. Utilisez l'opérateur de navigation sécurisé ?. avec tous les champs de formulaire pour éviter cela. Exemple ci-dessous:

<div class="form-group" [ngClass]="{'has-danger': password?.invalid && (password?.dirty || password?.touched), 'has-success': password?.valid && (password?.dirty || password?.touched)}"> 
    <label>Password</label> 
    <input type="password" class="form-control" formControlName="password"> 
</div> 

Answer 2

Dans les formes réactives, vous ne pouvez pas utiliser par exemple email pour faire référence à votre contrôle de formulaire (contrairement à le modèle des formes entraîné où vous utilisez une variable de référence de modèle ).

Vous devez faire référence au contrôle de forme réelle dans votre modèle, donc par exemple votre validation email pourrait ressembler à ceci:

[ngClass]="{'has-danger': myForm.controls.email.invalid && ..... } 

(Il peut exiger de l'opérateur de sécurité de la navigation ici aussi, pas sûr, vous Dans ce cas, il s'agit d'un long chemin, vous pouvez donc l'affecter à une variable après avoir créé un formulaire, par exemple la variable email, vous pouvez alors utiliser le code que vous avez maintenant.

email: FormControl; 

createForm() { 
    this.myForm = this.fb.group({ 
     .... 
    }); 

    this.email = this.myForm.controls.email; 
}