Angular：无法读取 null 的属性（读取“cannotContainSpace”）答案

【问题标题】：Angular: Cannot read properties of null (reading 'cannotContainSpace')Angular：无法读取 null 的属性（读取“cannotContainSpace”）
【发布时间】：2021-11-14 08:34:57
【问题描述】：

我创建了一个自定义的 ValidationFn 角度。不知何故，我总是收到以下错误消息：

ERROR TypeError: Cannot read properties of null (reading 'cannotContainSpace') 在 TutorRegistrationComponent_Template (template.html:31) 在执行模板 (core.js:9545) 在 refreshView (core.js:9414) 在 refreshComponent (core.js:10580) 在 refreshChildComponents (core.js:9211) 在 refreshView (core.js:9464) 在 renderComponentOrTemplate (core.js:9528) 在 tickRootContext (core.js:10754) 在 detectChangesInRootView (core.js:10779) 在 RootViewRef.detectChanges (core.js:22792)

这就是我制作验证器的方式：

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;
  }
}

这就是我在页面中使用验证器的方式：

  ngOnInit() {
    this.registrationForm = new FormGroup({
      username: new FormControl(
        '',
        [Validators.required, UsernameValidators.cannotContainSpace],
        UsernameValidators.shouldBeUnique
      ),
      password: new FormControl(''),


    });
 }

在我看来：

   <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>

我做错了什么？非常感谢！

【问题讨论】：

标签： javascript angular validation ionic-framework

【解决方案1】：

AbstractControl.errors 可能返回 null。因此，当null 或undefined 时，您需要将Optional chaining (?.) 用于username.errors 以防止访问链接属性。

?。运算符类似于. 链接运算符，不同之处在于如果引用无效（null 或 undefined）会导致错误，表达式短路，返回值为 undefined。使用时使用函数调用，如果给定函数确实返回 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>

Sample Solution on StackBlitz

【讨论】：

谢谢！现在可以了！