- 首页
- 前端开发
- Angular 8:错误类型错误:无法读取未定义的属性“无效"
Angular 8:错误类型错误:无法读取未定义的属性“无效"
[英] Angular 8 :ERROR TypeError: Cannot read property 'invalid' of undefined
本文介绍了Angular 8:错误类型错误:无法读取未定义的属性“无效"的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有人能解释一下这到底是什么意思吗?我是 Angular 的新手，目前正在使用 Angular 8，这出现在我的控制台上.
<块引用>
错误类型错误:无法读取未定义的属性无效"
在 Object.eval [作为 updateDirectives] (RegisterComponent.html:10)在 Object.debugUpdateDirectives [作为 updateDirectives] (core.js:45259)在 checkAndUpdateView (core.js:44271)在 callViewAction (core.js:44637)在 execComponentViewsAction (core.js:44565)在 checkAndUpdateView (core.js:44278)在 callViewAction (core.js:44637)在 execEmbeddedViewsAction (core.js:44594)在 checkAndUpdateView (core.js:44272)在 callViewAction (core.js:44637)
这是我的源代码，它暗示了有错误的页面
register.component.ts
import { authTkn } from './../shared/model/loginDetails';从'./../shared/services/mahasiswa-api.service'导入{MahasiswaApiService}；从@angular/core"导入 { Component, OnInit };从 '@angular/router' 导入 { Router, RouterModule };从@angular/forms"导入 { FormBuilder, FormGroup, Validators };从'rxjs/operators'导入{第一个}；从 'crypto-js' 导入 * 作为 CryptoJS；@成分({选择器:应用注册"，templateUrl: './register.component.html',styleUrls: ['./register.component.scss']})导出类 RegisterComponent 实现 OnInit {公共 authTkn:authTkn = 空；registerForm = this.fb.group({用户名: ['', Validators.required],全名:[''，Validators.required]，电话:['', Validators.required],电子邮件:[''，Validators.required]，alamat: ['', Validators.required],生日: ['', Validators.required],foto_profil: ['', Validators.required],密码:['', Validators.required],});构造函数(私有 mahasiswaApi:MahasiswaApiService，私有路由:路由器，私有 fb:FormBuilder){}ngOnInit() {}提交(){this.registerForm.controls.password.patchValue(CryptoJS.SHA512(this.registerForm.value.password).toString());console.log(this.registerForm.value);this.mahasiswaApi.postUserRegister(this.registerForm.value).subscribe(资源=>{控制台日志(res)；this.authTkn = res;控制台日志(this.authTkn)；localStorage.setItem('token', this.authTkn.token);this.mahasiswaApi.getCurrentToken();this.route.navigate(['/home']);警报(this.authTkn.info)；},错误 =>{控制台日志(错误)；警报(错误.错误.消息)；});}}
register.component.html
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()"><h2 class="text-center">注册 </h2><!-- 注册用户名--><div class="form-group"><label for="user_name">用户名</label><input type="text" class="form-control" name="Username" formControlName="user_name" placeholder="text"><div class="alert alert-danger" *ngIf="user_name.invalid && user_name.dirty" @myInsertRemoveTrigger>用户名必须填写</div>
<!-- 注册 Nama Lengkap --><div class="form-group"><label for="nama lengkap">Nama Lengkap </label><input type="text" class="form-control" name="Nama Lengkap" formControlName="fullname" placeholder="text"><div class="alert alert-danger" *ngIf="fullname.invalid && fullname.dirty" @myInsertRemoveTrigger>请在此处填写您的全名</div>
<!-- 注册 Nomor Telepon --><div class="form-group"><label for="nomor_telepon">Nomor Telepon </label><input type="text" class="form-control" name="Nomor Telepon" formControlName="telepon" placeholder="text">
<!-- 注册邮箱--><div class="form-group"><label for="email">电子邮件</label><input type="email" class="form-control" name="Email" formControlName="email" placeholder="email">
<!-- 注册 Tanggal Lahir --><div class="form-group"><label for="Tanggal_lahir">Tanggal Lahir </label><input type="date" class="form-control" name="Tanggal Lahir" formControlName="birthdate" placeholder="date">
<!-- 注册照片--><div class="form-group"><label for="Foto_Profil">照片资料 </label><input type="file" class="form-control" name="Foto Profile" formControlName="foto_profil" placeholder="file">
<!-- 注册密码--><div class="form-group"><label for="密码">密码<input type="password" class="form-control" name="Password" formControlName="password" placeholder="password"><div class="alert alert-danger" *ngIf="password.invalid && password.dirty" @myInsertRemoveTrigger>必须填写密码</div>
<!-- 按钮狗屎--><div class="form-group"><button type="submit" class="btn btn-primary btn-block" [disabled]="!registerForm.valid">注册</button>
<div class="clearfix"><label class="pull-left checkbox-inline"><input type="checkbox" formControlName="remember_me">记住我</label>
</表单>
也许我有一些变量定义问题，但我确实在我的 ts 的第一部分为我的表单定义了使用变量的数组.也许我确实丢了东西，那是什么?
解决方案
您需要像这样访问表单对象上的表单控件:registerForm.get('user_name').invalid依此类推，对于每个属性(例如 dirty)和表单中的每个控件.
另一种选择是在您的组件类中为每个表单控件创建一个 getter:
get user_name() {返回 this.registerForm.get('user_name');
然后您可以保持当前的 HTML 状态.
如果你看这里的例子:https://angular.io/guide/form-validation#built-in-validators 他们说:
<块引用>这个例子添加了一些 getter 方法.在响应式表单中，您始终可以通过其父组上的 get 方法访问任何表单控件，但有时将 getter 定义为模板的简写会很有用.
参考表单控件的 getter.
Can someone explain what this actually means? I am new to Angular and currently using Angular 8 and this appears on my console.
ERROR TypeError: Cannot read property 'invalid' of undefined
at Object.eval [as updateDirectives] (RegisterComponent.html:10)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:45259)
at checkAndUpdateView (core.js:44271)
at callViewAction (core.js:44637)
at execComponentViewsAction (core.js:44565)
at checkAndUpdateView (core.js:44278)
at callViewAction (core.js:44637)
at execEmbeddedViewsAction (core.js:44594)
at checkAndUpdateView (core.js:44272)
at callViewAction (core.js:44637)
Here's my sourcode which implies the page that have the errors
register.component.ts
import { authTkn } from './../shared/model/loginDetails';
import { MahasiswaApiService } from './../shared/services/mahasiswa-api.service';
import { Component, OnInit } from '@angular/core';
import { Router, RouterModule } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { first } from 'rxjs/operators';
import * as CryptoJS from 'crypto-js';
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {
public authTkn: authTkn = null;
registerForm = this.fb.group({
user_name: ['', Validators.required],
fullname: ['', Validators.required],
telepon: ['', Validators.required],
email: ['', Validators.required],
alamat: ['', Validators.required],
birthdate: ['', Validators.required],
foto_profil: ['', Validators.required],
password: ['', Validators.required],
});
constructor(private mahasiswaApi: MahasiswaApiService, private route: Router, private fb: FormBuilder) { }
ngOnInit() {
}
onSubmit() {
this.registerForm.controls.password.patchValue(
CryptoJS.SHA512(this.registerForm.value.password).toString()
);
console.log(this.registerForm.value);
this.mahasiswaApi.postUserRegister(this.registerForm.value).subscribe(
res => {
console.log(res);
this.authTkn = res;
console.log(this.authTkn);
localStorage.setItem('token', this.authTkn.token);
this.mahasiswaApi.getCurrentToken();
this.route.navigate(['/home']);
alert(this.authTkn.info);
},
error => {
console.log(error);
alert(error.error.message);
}
);
}
}
register.component.html
<div class="login-form">
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
<h2 class="text-center"> Register </h2>
<!-- Register Username -->
<div class="form-group">
<label for="user_name"> Username </label>
<input type="text" class="form-control" name="Username" formControlName="user_name" placeholder="text">
<div class="alert alert-danger" *ngIf="user_name.invalid && user_name.dirty" @myInsertRemoveTrigger>Username Must Be filled</div>
</div>
<!-- Register Nama Lengkap -->
<div class="form-group">
<label for="nama lengkap"> Nama Lengkap </label>
<input type="text" class="form-control" name="Nama Lengkap" formControlName="fullname" placeholder="text">
<div class="alert alert-danger" *ngIf="fullname.invalid && fullname.dirty" @myInsertRemoveTrigger> Please fill your complete name here</div>
</div>
<!-- Register Nomor Telepon -->
<div class="form-group">
<label for="nomor_telepon"> Nomor Telepon </label>
<input type="text" class="form-control" name="Nomor Telepon" formControlName="telepon" placeholder="text">
</div>
<!-- Register Email -->
<div class="form-group">
<label for="email"> Email </label>
<input type="email" class="form-control" name="Email" formControlName="email" placeholder="email">
</div>
<!-- Register Tanggal Lahir -->
<div class="form-group">
<label for="Tanggal_lahir"> Tanggal Lahir </label>
<input type="date" class="form-control" name="Tanggal Lahir" formControlName="birthdate" placeholder="date">
</div>
<!-- Register Foto -->
<div class="form-group">
<label for="Foto_Profil"> Foto Profil </label>
<input type="file" class="form-control" name="Foto Profil" formControlName="foto_profil" placeholder="file">
</div>
<!-- Register Password -->
<div class="form-group">
<label for="Password"> Password </label>
<input type="password" class="form-control" name="Password" formControlName="password" placeholder="password">
<div class="alert alert-danger" *ngIf="password.invalid && password.dirty" @myInsertRemoveTrigger>Password Must Be filled</div>
</div>
<!-- Button shit -->
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block" [disabled]="!registerForm.valid"> Register </button>
</div>
<div class="clearfix">
<label class="pull-left checkbox-inline"><input type="checkbox" formControlName="remember_me"> Remember me</label>
</div>
</form>
</div>
Maybe I had some variable definition problem, but I did actually define arrays of used variables for my form at the first part of my ts. Maybe I did lost something, what is that?
解决方案
You'll need to access the form control on the form object like this: registerForm.get('user_name').invalid and so on, for each property (such as dirty) and for each control in the form.
Another alternative is to create a getter in your component class for each form control:
get user_name() {
return this.registerForm.get('user_name');
Then you can keep your HTML as it is currently.
If you look at the example here: https://angular.io/guide/form-validation#built-in-validators they say:
This example adds a few getter methods. In a reactive form, you can always access any form control through the get method on its parent group, but sometimes it's useful to define getters as shorthands for the template.
In reference to getters for the form controls.
这篇关于Angular 8:错误类型错误:无法读取未定义的属性“无效"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
