Question

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

所以，我在Angular App中有一个自定义验证器（根据一些教程和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一般都是新手。

任何建议都会受到最高的赞赏。

已更新实施

＆＃39; platform.component.ts＆＃39; （部分）

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

＆＃39; platform.component.html＆＃39; （部分）

<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加载，验证将正常工作。但是，如果我直接浏览带有表单的页面，则不会定义文档＆＃39;但是，因为它仍然从服务器加载。

Answer 1

所以，我把@ developer033的评论铭记于心，并决定采用不同的方法。我没有使用验证器，而是决定创建一种方法来检查（模糊）的有效性并手动设置错误。

也许是目前的形式，不像验证者那样可以重复使用，但可以改进。

结果：

platform.component.ts（partial）

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>

未定义Angular Validator文档

1 个答案: