[英]Angular: Cannot read properties of null (reading 'cannotContainSpace')
I have created a custom ValidationFn in Angular. Somehow I always get the following error message:我在 Angular 中创建了自定义 ValidationFn。不知何故,我总是收到以下错误消息:
ERROR TypeError: Cannot read properties of null (reading 'cannotContainSpace') at TutorRegistrationComponent_Template (template.html:31) at executeTemplate (core.js:9545) at refreshView (core.js:9414) at refreshComponent (core.js:10580) at refreshChildComponents (core.js:9211) at refreshView (core.js:9464) at renderComponentOrTemplate (core.js:9528) at tickRootContext (core.js:10754) at detectChangesInRootView (core.js:10779) at RootViewRef.detectChanges (core.js:22792)
错误类型错误:无法在 TutorRegistrationComponent_Template (template.html:31) 在 refreshComponent (core.js:9414) 在 refreshView (core.js:9414) 在 executeTemplate (core.js:9414) 读取属性在 refreshChildComponents (core.js:9211) 在 refreshView (core.js:9464) 在 renderComponentOrTemplate (core.js:9528) 在 tickRootContext (core.js:10754) 在 detectChangesInRootView (core.js:10779) 在 RootViewRef.detectChanges (核心.js:22792)
This is how I made the Validator:这就是我制作验证器的方式:
export class UsernameValidators {
static cannotContainSpace(control: AbstractControl): ValidationErrors | null {
if ((control.value as string).indexOf(' ') >= 0) {
console.log('username in validator (cannotContainSpace)', control.value);
const valError: ValidationErrors = { cannotContainSpace: true };
return { cannotContainSpace: true };
}
return null;
}
}
This is how I used the Validator in my Page:这就是我在页面中使用验证器的方式:
ngOnInit() {
this.registrationForm = new FormGroup({
username: new FormControl(
'',
[Validators.required, UsernameValidators.cannotContainSpace],
UsernameValidators.shouldBeUnique
),
password: new FormControl(''),
});
}
and in my view:在我看来:
<ion-item lines="full">
<ion-label position="floating">Username</ion-label>
<ion-input type="text" formControlName="username"></ion-input>
<div
*ngIf="username.errors.cannotContainSpace && username.touched"
class="alert alert-danger"
>
Username cannot contain space.
</div>
<div
*ngIf="username.errors.required && username.touched"
class="alert alert-danger"
>
Username is required.
</div>
<div
*ngIf="username.errors.shouldBeUnique && username.touched"
class="alert alert-danger"
>
Username is already taken.
</div>
<div *ngIf="username.pending">Verfügbarkeit wird überprüft...</div>
</ion-item>
What am I doing wrong?我究竟做错了什么? Thank you a lot!
万分感谢!
AbstractControl.errors possibly returns null. Hence you need to use Optional chaining (?.) for username.errors
to prevent accessing chaining properties when it is null
or undefined
. AbstractControl.errors可能返回 null。因此,您需要对
username.errors
使用可选链接 (?.)以防止在null
或undefined
时访问链接属性。
The
?
的
?
.. operator is like the
.
运算符就像
.
chaining operator, except that instead of causing an error if a reference is nullish (null
orundefined
), the expression short-circuits with a return value of undefined.链接运算符,除了如果引用为空(
null
或undefined
)时不会导致错误,表达式会短路并返回 undefined 值。 When used with function calls, it returns undefined if the given function does not exist.当与 function 调用一起使用时,如果给定的 function 不存在,则返回 undefined。
<div
*ngIf="username.errors?.cannotContainSpace && username.touched"
class="alert alert-danger"
>
Username cannot contain space.
</div>
<div
*ngIf="username.errors?.required && username.touched"
class="alert alert-danger"
>
Username is required.
</div>
<div
*ngIf="username.errors?.shouldBeUnique && username.touched"
class="alert alert-danger"
>
Username is already taken.
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.