angular - 收到错误类型错误 : Cannot read property 'valid' of undefined for Angular 5 template form

Question

我正在尝试创建一个用于注册新用户的模型驱动的 Angular 模板。为此，我创建了 2 个主要用途的文件:

admin-register.component.html admin-register-form.component.ts

当尝试转到显示注册表单的页面时，我在控制台中看到以下内容

ERROR TypeError: Cannot read property 'valid' of undefined

我做错了什么？

TIA

错误消息

admin-register.component.html

<div class="container">
  <div class="row">
    <div class="col"></div>
    <div class="col-md-8 ">
      <form [formGroup]="userForm" (ngSubmit)="onSubmit()" >
        <div class="row">
          <div class="col-xs-12 col-sm-6 col-md-6">

            <!-- set up first name -->
            <div class="form-group">
              <div class="input">
                <label>First Name</label>
                <input type="text" id="firstname" formControlName="firstname" class="form-control input-lg" name="firstname" tabindex="1" />
              </div>
            </div>
          </div>

          <div class="col-xs-12 col-sm-6 col-md-6">
            <!-- set up last name  -->
            <div class="form-group">
              <div class="input">
                <label>Last Name</label>
                <input type="text" id="lastname" formControlName="lastname" class="form-control input-lg" name="lastname" tabindex="1" />
              </div>
            </div>
          </div>
        </div>

        <!-- set up EMail address -->
        <div class="form-group">
          <div class="input">
            <label>EMail Address</label>
            <input type="text" id="email" formControlName="email" class="form-control input-lg" name="email" tabindex="1">
          </div>
        </div>

        <!-- set up username -->
        <div class="form-group">
          <div class="input">
            <label>Username</label>
            <input type="text" id="username" formControlName="username" class="form-control input-lg" name="username" tabindex="1" />
          </div>
        </div>


        <div formGroupName="passinfo">
          <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-6">
              <!-- set up password -->
              <div class="form-group">
                <div class="input">
                  <label>Password</label>
                  <input type="text" id="password" formControlName="password" class="form-control input-lg" name="password" tabindex="1" />
                </div>
              </div>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-6">

              <!-- set up password confirmation -->
              <div class="form-group">
                <div class="input">
                  <label>Password Confirmation</label>

                  <input type="text" id="passwordconf" formControlName="passwordconf" class="form-control input-lg" name="passwordconf" tabindex="1" />
                </div>
              </div>
            </div>
          </div>
        </div>


        <!-- button to save the info -->
        <div class="input">

          <input [disabled]="!userForm.form.valid" class="btn btn-success btn-lg btn-primary btn-block btn-signin" type="submit" value="Sign Up For Free!">
        </div>
      </form>
    </div>
    <div class="col"></div>
  </div>
</div>

admin-register-form.component.ts

import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { NgForm, FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
import { ElementRef } from '@angular/core/src/linker/element_ref';
import { formArrayNameProvider } from '@angular/forms/src/directives/reactive_directives/form_group_name';
import { User } from '../_admin-model/user';
import { Observable } from 'rxjs/Observable';
import { AdminServicesService } from '../_admin-services/admin-services/admin-services.service';

// items needed to support the operations with Observables
import 'rxjs/add/operator/concatMap';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/expand';
import 'rxjs/add/operator/filter';

[... snip ...]

@Component({
  selector: 'app-admin-register-form',
  templateUrl: './admin-register-form.component.html',
  styleUrls: ['./admin-register-form.component.scss'],
  encapsulation: ViewEncapsulation.None
})

export class AdminRegisterFormComponent implements OnInit {

  public userForm: FormGroup;

  onSubmit() {
    console.log(this.userForm.value);
  }


  [... snip ...]


  constructor(private authService: AdminServicesService) {

    this.userForm = new FormGroup({
      firstname: new FormControl(),
      lastname: new FormControl(),
      email: new FormControl(),
      username: new FormControl(),
      passinfo: new FormGroup({
        password: new FormControl(),
        passwordconf: new FormControl()
      })
    });
  }


  ngOnInit() {

  }
}

Answer 1

使用

 !userForm.valid 

不是

!userForm.form.valid

检查表单控件是否全部有效时。