Angular。無法讀取null的屬性（讀取'cannotContainSpace'）。 -有解無憂

我在angular中創建了一個自定義的ValidationFn。不知何故，我總是得到以下錯誤資訊：

<

ERROR TypeError: 無法讀取null的屬性（讀取 'cannotContainSpace') at TutorRegistrationComponent_Template (template.html:31) at executeTemplate (core.js:9545) 在 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:2279)

我是這樣制作驗證器的：

我是這樣制作驗證器的：
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( ''/span>, [Validators.required, UsernameValidators.cannotContainSpace] 。 UsernameValidators.shouldBeUnique] 。 ), password。new FormControl(''/span>)。 }); }
而在我看來:
 <ion-item lines="full"/span>>
      <ion-label position="floating"/span>> 用戶名</ion-label> 
      < ion-input type="text" formControlName="user" > </ion-input> 
      <div>
        *ngIf="username.errors.cannotContainSpace & & username.touched"
        class="alert alert-danger" 
      >
        用戶名不能包含空格。
      </div>/span>
      <div
        *ngIf="username.errors.required && username.touched"
        class="alert alert-danger" 
      >
        用戶名是必須的。
      </div>/span>
      <div
        *ngIf="username.errors.shouldBeUnique && username.touched" 
        class="alert alert-danger" 
      >
        用戶名已被占用。
      </div>/span>
      <div *ngIf="用戶名。 pending">Verfügbarkeit wird überprüft...</div> 
   </ion-item>
我做錯了什么？非常感謝！

uj5u.com熱心網友回復：

AbstractControl.errors可能回傳null。因此，你需要對username.errors使用Optional chaining (?.)，以防止在它是null或undefined時訪問連鎖屬性。
?.運算子就像.鏈式運算子一樣，除了如果一個參考是空的(null或undefined)，它不會引起錯誤。運算式會以一個未定義的回傳值短路。當用于時，如果給定的函式不存在，它將回傳未定義。不存在。
<div
  *ngIf="username.errors?.cannotContainSpace && username.touched"。
  class="alert alert-danger" 
>。
  Username不能包含空格。
</div>。
<div。
  *ngIf="username.errors?.required && username.touched"
  class="alert alert-danger" 
>
  用戶名是必須的。
</div>/span>
<div
  *ngIf="username.errors?.shouldBeUnique && username.touched" 
  class="alert alert-danger" 
>
  用戶名已被占用。
</div>
StackBlitz上的示例解決方案

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/328674.html
標籤：

上一篇：表視圖中的按鈕ibaction沒有被呼叫
下一篇：如何區分從同一臺機器到一個套接字的不同連接，以及彼此之間的區別？