typescript - angular formbuilder không thể tìm thấy formgroup

Tôi đang cố gắng sử dụng formbuilder để giảm bớt khá nhiều mã trong thành phần form của mình, tuy nhiên tôi không thể làm nó hoạt động, bất kể tôi làm gì, tôi vẫn nhận được 'Cannot read property 'invalid' of undefined', mã ở dưới đây, tôi có bỏ lỡ điều gì không?

thành phần.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>

thành phần.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() {}
}

Câu trả lời #1

Mẫu thành phần đang cố gắng truy cập biến trước khi biến được khai báo. Sử dụng toán tử điều hướng an toàn ?. với tất cả các trường biểu mẫu để tránh điều đó. Ví dụ bên dưới:

<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>

Câu trả lời #2

Trong các biểu mẫu phản ứng, bạn không thể chỉ sử dụng ví dụ email để tham chiếu đến điều khiển biểu mẫu của mình (trái ngược với các biểu mẫu dựa trên mẫu nơi bạn sử dụng biến tham chiếu mẫu).

Bạn cần tham chiếu đến điều khiển biểu mẫu thực tế trong mẫu của bạn, vì vậy ví dụ việc xác thực email của bạn có thể trông như sau:

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

(Có thể cũng cần toán tử điều hướng an toàn ở đây, không chắc lắm, bạn có thể thêm vào nếu nó báo lỗi)

Trong trường hợp này, đó là một đường dẫn dài, vì vậy bạn thực sự có thể gán điều này cho một biến sau khi xây dựng một biểu mẫu, ví dụ biến email, sau đó bạn có thể sử dụng mã mà bạn có bây giờ.

email: FormControl;

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

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