Angular 5 reactive forms验证器错误
Angular 5 reactive forms验证器错误
提问于 2018-06-03 00:15:24
我被困在这个愚蠢的angular 5 reactive forms错误中，我无法摆脱它。在html中添加验证消息块时，我收到错误
“无法读取未定义的属性'invalid‘”
下面是代码
HTML文件
<form [formGroup]='signUpForm'>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" formControlName='password'>
<div *ngIf="password.invalid && (password.dirty || password.touched)"
class="alert alert-danger">
<div *ngIf="password.errors.required">
Name is required.
</div>
</div>
</div>
</div>
</div>
</form>ts代码
signUpForm: FormGroup;
this.signUpForm = new FormGroup({
username:new FormControl('',Validators.required),
email:new FormControl('',[Validators.required]),
password:new FormControl('',Validators.required),
})请帮帮忙。提前感谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-03 00:22:54
试试这段代码。
<div *ngIf="signUpForm.controls['password'].invalid && (signUpForm.controls['password'].dirty || signUpForm.controls['password'].touched)"
class="alert alert-danger">
<div *ngIf="signUpForm.get('password').hasError('required')">
Name is required.
</div>
</div>Stack Overflow用户
发布于 2018-06-03 00:18:46
在哪里初始化表单？？如果你是在ngOnInit()中做的，你就不应该面对这个问题。
如果您正在使用您的任何其他自定义方法初始化表单，那么您可以使用类似以下内容：
使用安全导航操作符?。这将检查第一个运算符是否为true。呈现视图时，控件可能尚未初始化。因此，假设在呈现视图时没有定义组件变量password，而您试图访问属性invalid为password(未定义)，您将得到现在得到的错误。
例如：
<div *ngIf="password?.invalid && (password?.dirty || password?.touched)" class="alert alert-danger">因此您的实际视图可能如下所示：
<form [formGroup]='signUpForm'>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" formControlName='password'>
<div *ngIf="password?.invalid && (password?.dirty || password?.touched)" class="alert alert-danger">
<div *ngIf="password?.errors?.required">
Name is required.
</div>
</div>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50658831
复制相关文章
相似问题