Angular 4 Reactive Forms FormControl 错误为空
[英] Angular 4 Reactive Forms FormControl errors is null
本文介绍了Angular 4 Reactive Forms FormControl 错误为空的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如果我在没有输入任何内容的情况下浏览文本输入,则会显示错误 msg divs,表明所需的验证器已正确触发.但是,如果我在其中一个字段中输入任何内容,控制台会立即抛出此错误:
无法读取 null 的属性 'required'
这是我的组件:
import { PasswordValidators } from './../validators/password.validators';从@angular/core"导入 { Component, OnInit };从@angular/forms"导入 { FormBuilder, Validators, FormGroup, FormControl };@成分({选择器:'app-changepassword-form',templateUrl: './changepassword-form.component.html',styleUrls: ['./changepassword-form.component.css']})导出类 ChangepasswordFormComponent {形式;构造函数(FB:FormBuilder){this.form = fb.group({新密码: ['', Validators.required],确认密码:['',Validators.required]})}获取新密码(){return this.form.get('newPassword');}得到确认密码(){return this.form.get('confirmPassword');}}
和 HTML:
<div class="form-group"><label for="confirmPassword">确认密码</label><input formControlName="confirmPassword" id="confirmPassword" type="text" class="form-control"><div class="alert alert-danger" *ngIf="confirmPassword.touched &&confirmPassword.errors.required">必需的
<p><button class="btn btn-primary">提交</button></p></表单>
解决方案
该错误来自于此:
*ngIf="newPassword.touched && newPassword.errors.required"
当您输入一个值时,不再有错误集合,因此检查 newPassword.errors.required
会生成 Cannot read property 'required' of null
错误.
试试这样的:
*ngIf="newPassword.touched && newPassword.errors?.required"
举个例子,我的看起来像这样:
<input class="form-control"id="产品名称Id"类型=文本"占位符=名称(必填)"必需的最小长度=3"[(ngModel)] = product.productName名称=产品名称"#productNameVar="ngModel"/><span class="help-block" *ngIf="(productNameVar.touched ||productNameVar.dirty ||product.id !== 0) &&productNameVar.errors"><span *ngIf="productNameVar.errors.required">产品名称为必填项.</span><span *ngIf="productNameVar.errors.minlength">产品名称必须至少为三个字符.</span></span>
If I tab through the text inputs without entering anything, the error msg divs display indicating that the required validator has fired correctly. However, if I type anything into one of the fields, the console immediately throws this error:
Cannot read property 'required' of null
Here is my component:
import { PasswordValidators } from './../validators/password.validators';
import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators, FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-changepassword-form',
templateUrl: './changepassword-form.component.html',
styleUrls: ['./changepassword-form.component.css']
})
export class ChangepasswordFormComponent {
form;
constructor(fb: FormBuilder) {
this.form = fb.group({
newPassword: ['', Validators.required],
confirmPassword: ['', Validators.required]
})
}
get newPassword() {
return this.form.get('newPassword');
}
get confirmPassword() {
return this.form.get('confirmPassword');
}
}
and HTML:
<form [formGroup]="form">
<div class="form-group">
<label for="newPassword">New Password</label>
<input formControlName="newPassword" id="newPassword" type="text" class="form-control">
<div class="alert alert-danger" *ngIf="newPassword.touched && newPassword.errors.required">
Required
</div>
</div>
<div class="form-group">
<label for="confirmPassword">Confirm Password</label>
<input formControlName="confirmPassword" id="confirmPassword" type="text" class="form-control">
<div class="alert alert-danger" *ngIf="confirmPassword.touched && confirmPassword.errors.required">
Required
</div>
</div>
<p><button class="btn btn-primary">Submit</button></p>
</form>
解决方案
That error is coming from this:
*ngIf="newPassword.touched && newPassword.errors.required"
When you put in a value, there is no longer an errors collection so checking newPassword.errors.required
generates that Cannot read property 'required' of null
error.
Try something like this instead:
*ngIf="newPassword.touched && newPassword.errors?.required"
As an example, mine looks like this:
<div class="col-md-8">
<input class="form-control"
id="productNameId"
type="text"
placeholder="Name (required)"
required
minlength="3"
[(ngModel)] = product.productName
name="productName"
#productNameVar="ngModel" />
<span class="help-block" *ngIf="(productNameVar.touched ||
productNameVar.dirty || product.id !== 0) &&
productNameVar.errors">
<span *ngIf="productNameVar.errors.required">
Product name is required.
</span>
<span *ngIf="productNameVar.errors.minlength">
Product name must be at least three characters.
</span>
</span>
</div>
这篇关于Angular 4 Reactive Forms FormControl 错误为空的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!