角型バリデータードキュメントが定義されていません

Question

文字列入力が有効なCSSカラーであることを検証しようとしています。

import { AbstractControl, ValidationErrors } from '@angular/forms'; 

export class GamePlatformValidator { 

    static mustBeValidColor(control: AbstractControl): ValidationErrors | null { 
     const ele = document.createElement('div'); 
     ele.style.color = control.value as string; 
     const color = ele.style.color.split(/\s+/).join('').toLowerCase(); 

     if (color === '') { 
      ele.remove(); 
      return { mustBeValidColor: true }; 
     } 
     return null; 
    } 
} 

は、私は、コード内で何が起こっているか理解して、上記のコード：

だから、私は（SOにあるいくつかのチュートリアルといくつかの検証の提案に基づいて）私の角度Appでカスタムバリデータを持っています文字列の検証は正しく行われますが、ページのハードリフレッシュでは、このコードを動作させるための準備がドキュメントで必要になるため、そのまま使用することはできません。

残念ながら、私は一般的に角と実用的なJavaScriptにはかなり新しいので、これを修正する方法はわかりません。

ご意見をいただければ幸いです。実装

'platform.component.ts'（部分）

import { PlatformValidator } from './platform.validator'; 

export class GamesPlatformsComponent implements OnInit { 
    public form = new FormGroup({ 
     platform: new FormGroup({ 
      id: new FormControl(), 
      name: new FormControl('', [Validators.required, Validators.minLength(2)]), 
      icon: new FormControl('', [Validators.required, GamePlatformValidator.startsWithDot]), 
      color: new FormControl('' GamePlatformValidator.mustBeValidColor), 
      hidden: new FormControl(false) 
     }) 
    }); 
} 

'platform.component.html'（部分）

<div class="input-group"> 
    <span class="input-group-addon">Color</span> 
    <input formControlName="color" 
      id="color" type="text" 
      class="form-control" 
      placeholder="Enter #color-code..." /> 
</div> 
<div *ngIf="color.invalid && color.touched" class="alert alert-danger top-margin"> 
    <div *ngIf="color.errors.mustBeValidColor"> 
     <p>Must be a valid css color.</p> 
     <hr /> 
     <h6>Examples:</h6> 
     <ul> 
      <li>red</li> 
      <li>#f00</li> 
      <li>#ff0000</li> 
      <li>rgb(255,0,0)</li> 
      <li>rgba(255,0,0,1)</li> 
     </ul> 
    </div> 
</div> 

で更新

明確にする： フォームページを直接参照しないと、バリデーターは正常に動作します。したがって、アプリが他のURLにナビゲートして読み込むことができる場合、検証は正常に機能します。しかし、フォームでページを直接参照すると、まだドキュメントがサーバーからロードされているため、 'ドキュメントは定義されません'。

Answer 1

私は@ developer033のコメントを心に留めて、別のアプローチをとることに決めました。バリデーターを使用する代わりに、（ぼかし）の妥当性をチェックし、手動でエラーを設定するメソッドを作成することにしました。

おそらく、現在の形式で、バリデータとして再利用可能ではなく、改善することができます。

結果：

platform.component.ts（部分）

import { GamePlatformValidator } from './platform.validator'; 

export class GamesPlatformsComponent implements OnInit { 
    public platforms: any[]; 
    public form = new FormGroup({ 
     platform: new FormGroup({ 
      id: new FormControl(), 
      name: new FormControl('', [Validators.required, Validators.minLength(2)]), 
      icon: new FormControl('', [Validators.required, GamePlatformValidator.startsWithDot]), 
      color: new FormControl(''), 
      hidden: new FormControl(false) 
     }) 
    }); 

    ... 

    get color() { 
     return this.form.get('platform.color'); 
    } 

    ... 

    validateColor() { 
     const ele = document.createElement('div'); 
     ele.style.color = this.color.value; 
     const color = ele.style.color.split(/\s+/).join('').toLowerCase(); 

     if (color === '') { 
      this.color.setErrors({ invalidColor: true }); 
     } else { 
      this.color.setErrors(null); 
     } 
     ele.remove(); 
    } 
} 

platform.component.html（部分）

<div class="input-group"> 
    <span class="input-group-addon">Color</span> 
    <input formControlName="color" 
      id="color" type="text" 
      class="form-control" 
      placeholder="Enter #color-code..." 
      (blur)="validateColor()" /> 
</div> 
<div *ngIf="color.invalid && color.touched" class="alert alert-danger top-margin"> 
    <div *ngIf="color.errors.invalidColor"> 
     <p>Must be a valid css color.</p> 
     <hr /> 
     <h6>Examples:</h6> 
     <ul> 
      <li>red</li> 
      <li>#f00</li> 
      <li>#ff0000</li> 
      <li>rgb(255,0,0)</li> 
      <li>rgba(255,0,0,1)</li> 
     </ul> 
    </div> 
</div>