angular formbuilder kann formgroup nicht finden

Question

Ich versuche Formbuilder zu verwenden, um ein wenig Code auf meiner Formularkomponente zu reduzieren, aber ich kann es nicht zum Laufen bringen, egal was ich mache, bekomme ich immer 'Kann nicht lese Eigenschaft 'ungültig' von undefiniert ', der Code ist unten, fehlt mir etwas?

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

Die Komponentenvorlage versucht Variable zuzugreifen, bevor er erklärt wurde. Verwenden Sie den sicheren Navigationsoperator ?. mit allen Formularfeldern, um dies zu vermeiden. Beispiel unten:

<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

In reaktiven Formen, können Sie nicht verwenden, zB nur email zum Formular Kontrolle zu beziehen (im Gegensatz angetrieben Formulare Vorlage, wo Sie eine Vorlage Referenzgröße verwenden).

Sie müssen auf die tatsächliche Form Kontrolle in Ihrer Vorlage verweisen, so zum Beispiel Ihre email Validierung könnte wie folgt aussehen:

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

(Es könnte die sichere Fahrt Betreiber auch hier nicht sicher, Sie benötigen kann das anhängen, wenn es einen Fehler wirft)

in diesem ist es ein langer Weg, also konnten Sie diesem einer Variablen nach dem Errichten eines Formulars, zum Beispiel Variable email zuweisen, dann können Sie den Code verwenden, den Sie jetzt haben.

email: FormControl; 

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

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