Angular Validator文檔沒有定義

我想驗證一個字符串輸入是一個有效的CSS顏色。Angular Validator文檔沒有定義

所以，我有我的角度應用自定義驗證程序（基於一些教程和一些驗證建議對SO找到）：

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

我明白髮生了什麼代碼，和上面的代碼驗證字符串就好了，但顯然不能按原樣使用，因爲頁面的硬刷新需要文檔準備好使代碼正常工作。

不幸的是，我不知道如何解決這個問題，因爲我對通常的角色和實際的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>

澄清： 當我不直接瀏覽表單頁面時，驗證器正常工作。所以，如果應用程序能夠通過導航到任何其他網址加載，驗證將正常工作。但是，如果我直接瀏覽到帶有表單的頁面，那麼'文檔將不會被定義'，因爲它仍然是從服務器加載的。

來源

2017-08-27 nGAGE

如何實現這個驗證器？ – Vega

@Vega對不起，沒想到代碼是必要的。添加了相關的代碼片段。 – nGAGE

儘管你得到'文件沒有定義'的事實，我認爲你應該考慮採取另一種方法來檢查它是否是一個有效的十六進制代碼。看看[**在這個問題**]（https://stackoverflow.com/questions/8027423/how-to-check-if-a-string-is-a-valid-hex-color-representation）。你可以很容易地對你的驗證器採用任何答案。 – developer033

因此，我把@ 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>

來源

2017-08-28 09:49:49 nGAGE

Angular Validator文檔沒有定義

回答

相關問題