无法读取反应形式中未定义的无效属性

Question

页面加载完毕后，我在控制台中收到错误ERROR TypeError：无法读取未定义的属性'invalid'

错误上下文DebugContext_ {view：{…}，nodeIndex：98，nodeDef：{…}，elDef：{…}，elView：{…}}

在ts文件中，我也在尝试console.log用户提交的值，但不起作用  console.log（this.registerForm.controls.first_name.value）; console.log（this.registerForm.controls.value）;

 <form method="post" [formGroup]="registerForm" (ngSubmit)="onSubmit()">
                  <div id="tab-2" class="log-tab-content">
                    <div class="login-form">

                      <div class="login-left">
                        <input type="text" formControlName="first_name" name="first_name" placeholder="First Name *"/>
                        <div *ngIf="submitted && registerForm.controls.first_name.errors" class="error">
                            <div *ngIf="registerForm.controls.first_name.errors.required">Your name is required</div>
                          </div>
                        <div class="clearfix"></div>
                        <input type="text" formControlName="email" name="email" placeholder="Email *"/>
                        <div class="clearfix"></div>
                        <div *ngIf="submitted && registerForm.controls.email.errors" class="error">
                            <div *ngIf="registerForm.controls.email.errors.required">Email is required</div>
                        </div>
                        <input type="text" formControlName="password" name="password" placeholder="Password *"/>
                        <div *ngIf="submitted && registerForm.controls.password.errors" class="error">
                            <div *ngIf="registerForm.controls.password.errors.required">Password is required</div>
                          </div>
                        <div class="clearfix"></div>
                        <input type="text" formControlName="birth_date" name="birth_date" placeholder="Birth date *"/>
                        <div *ngIf="submitted && registerForm.controls.birth_date.errors" class="error">
                            <div *ngIf="registerForm.controls.birth_date.errors.required">Birth Date is required</div>
                          </div>
                        <div class="clearfix"></div>
                        <input type="text" formControlName="phone" name="phone" placeholder="Phone"/>
                        <div *ngIf="submitted && registerForm.controls.phone.errors" class="error">
                            <div *ngIf="registerForm.controls.phone.errors.required">Phone Number is required</div>
                          </div>
                        <div class="clearfix"></div>
                      </div>
                      <div class="login-right">
                        <input type="text" formControlName="last_name" name="last_name" placeholder="Last Name *"/>
                        <div *ngIf="submitted && registerForm.controls.last_name.errors" class="error">
                            <div *ngIf="registerForm.controls.last_name.errors.required">Last Name is required</div>
                          </div>
                        <div class="clearfix"></div>
                        <input type="text" formControlName="c_email" name="c_email" placeholder="Confirm email *"/>
                        <div *ngIf="submitted && registerForm.controls.c_email.errors" class="error">
                            <div *ngIf="registerForm.controls.c_email.errors.required">Confirm your email</div>
                          </div>
                        <div class="clearfix"></div>
                        <input type="text" formControlName="c_password" name="c_password" placeholder="Password *"/>
                        <div *ngIf="submitted && registerForm.controls.c_password.errors" class="error">
                            <div *ngIf="registerForm.controls.c_password.errors.required">Password is required</div>
                          </div>
                        <div class="clearfix"></div>
                        <select formControlName="timezone" name="timezone" *ngIf="timezones">
                            <option value="" disabled selected> Select your timezone</option>
                            <option value="{{timezone.value}}" *ngFor="let timezone of timezones.success">
                              {{timezone.name}}
                            </option>
                          </select>
                          <div *ngIf="submitted && registerForm.controls.timezone.errors" class="error">
                              <div *ngIf="registerForm.controls.timezone.errors.required">TimeZone is required</div>
                            </div>
                        <div class="clearfix"></div>
                        <br>
                        <input name="" type="checkbox" value="">
                        I agree <a href="">Terms and conditions</a> </div>
                      <div class="clearfix"></div>
                      <button type="submit" class="log-button log-button1" [disabled]="regForm.invalid || password.value != c_password.value">Register now</button>
                    </div>
                  </div>
                </form>

ts文件

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../services/auth.service';
import { DataService } from '../services/data.service';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-x-home',
  templateUrl: './x-home.component.html',
  styleUrls: ['../app.component.css', './x-home.component.css']
})
export class XHomeComponent implements OnInit {

  timezones: Object;
  registerForm: FormGroup;
  submitted = false;
  success = false;

  constructor(private reg: AuthService, private data: DataService, private formBuilder: FormBuilder) {
   }
  registered: boolean = false;

  ngOnInit() {
    this.data.getTimeZone().subscribe(storeData=> {
      this.timezones = storeData;
    })

    this.registerForm = this.formBuilder.group({
      first_name: ['', Validators.required],
      last_name:['', Validators.required],
      email: ['', Validators.required],
      c_email: ['', Validators.required],
      password:['', Validators.required],
      c_password:['', Validators.required],
      birth_date: ['', Validators.required],
      phone: ['', Validators.required],
      timezone: ['', Validators.required],
    })
  }



  onSubmit() {

    this.submitted = true;

    if (this.registerForm.invalid) {
        return;
    }

    this.success = true;

   console.log(this.registerForm.controls.first_name.value);
   console.log(this.registerForm.controls.value);

  }

}