Angular Validator 文档未定义

Question

我正在尝试验证字符串输入是否是有效的 CSS 颜色。

所以，我在我的 Angular 应用程序中有一个自定义验证器（基于一些教程和一些在 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;
    }
}

我了解代码中发生了什么，上面的代码可以很好地验证字符串，但它显然不能按原样使用，因为页面的硬刷新需要文档准备好此代码工作。

不幸的是，我不知道如何解决这个问题，因为我对 Angular 和实用的 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>