getting ERROR TypeError: Cannot read property 'valid' of undefined for Angular 5 template form
getting ERROR TypeError: Cannot read property 'valid' of undefined for Angular 5 template form
我正在尝试创建一个用于注册新用户的 Model-Driven Angular template
。为此,我创建了 2 个主要用途的文件:
admin-register.component.html
管理员-注册-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-注册-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() {
}
}
使用
!userForm.valid
不是
!userForm.form.valid
检查表单控件是否全部有效时
我正在尝试创建一个用于注册新用户的 Model-Driven Angular template
。为此,我创建了 2 个主要用途的文件:
admin-register.component.html 管理员-注册-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-注册-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() {
}
}
使用
!userForm.valid
不是
!userForm.form.valid
检查表单控件是否全部有效时