Angular 8:ERROR TypeError:无法读取未定义的属性“无效" [英] Angular 8 :ERROR TypeError: Cannot read property 'invalid' of undefined
问题描述
有人可以解释这实际上意味着什么吗?我是Angular的新手，当前正在使用Angular 8，它出现在控制台上.
Can someone explain what this actually means? I am new to Angular and currently using Angular 8 and this appears on my console.
错误TypeError:无法读取未定义的属性无效"
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>
也许我有一些变量定义问题，但实际上我确实在ts的第一部分为表单定义了使用变量的数组.也许我确实失去了一些东西，那是什么?
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?
推荐答案
对于每个属性(例如dirty)，您需要像这样访问表单对象上的表单控件:registerForm.get('user_name').invalid，依此类推.以及表单中的每个控件.
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');
然后，您可以将HTML保留为当前状态.
Then you can keep your HTML as it is currently.
如果您在此处查看示例: https://angular.io/guide/form-validation#built-in-validators 他们说:
If you look at the example here: https://angular.io/guide/form-validation#built-in-validators they say:
此示例添加了一些getter方法.在反应形式中，您始终可以通过其父组上的get方法访问任何表单控件，但是有时将getter定义为模板的简写很有用.
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:ERROR TypeError:无法读取未定义的属性“无效"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
