[英]Angular 4 Reactive Forms FormControl errors is null
如果我在沒有輸入任何內容的情況下通過文本輸入進行選項卡,則錯誤消息msg顯示指示所需的驗證器已正確觸發。 但是,如果我在其中一個字段中鍵入任何內容,控制台會立即拋出此錯誤:
Cannot read property 'required' of null
這是我的組件:
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');
}
}
和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>
這個錯誤來自於此:
*ngIf="newPassword.touched && newPassword.errors.required"
當您輸入值時,不再存在錯誤集合,因此檢查newPassword.errors.required
生成Cannot read property 'required' of null
錯誤。
嘗試這樣的事情:
*ngIf="newPassword.touched && newPassword.errors?.required"
舉個例子,我看起來像這樣:
<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>
您還可以使用以下語法,它可以在不需要首先獲得值的情況下工作:
form.get('newPassword').hasError('required')
這將檢查錯誤中的“必需”。
這也會有效,而且更簡潔:
form.hasError('required','newPassword')
如果使用AOT選項進行編譯,根據本文 ,您應該使用hasError()語法進行權限:
不要使用control.errors?.someError,使用control.hasError('someError')
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.