Question

我有一个输入字段driveletterMount：

<input
    id="labelPath{{ i }}"
    name="labelPath{{i}}"
    type="text"
    #labelPath="ngModel"
    class="form-control"
    [(ngModel)]="diskItem.labelPath"
    pattern=""
    [disabled]="isDisabled || i<=0"
    [required]
    />

这里我需要一个带有条件的字段的动态模式。
例如：

如果操作系统类型是Windows，则：

pattern="[0-9][0-9]"

如果os是linux，则：

pattern="^(\/[a-zA-Z0-9_-]+)+$(?<!^\/bin|\/dev|\/etc|\/mnt|\/opt|\/run|\/srv|\/sys|\/tmp|\/usr|\/var|\/lib|\/proc|\/sbin|\/root|\/boot|\/home|\/lib64|\/media|\/usr\/bin|\/usr\/lib|\/usr\/lib64|\/usr\/sbin|(\/usr\/bin)|(\/usr\/lib)|(\/usr\/lib64)|(\/usr\/sbin)$)"

Answer 1

这是一个复杂的情况，应在组件的TypeScript文件中处理。（* .ts）

在TS文件中添加一个名为getPattern的方法：

get pattern(): string {
    if (this.osIsWindows) {
        return "[0-9][0-9]";
    } else if (this.osIsLinux) {
        return "^(\/[a-zA-Z0-9_-]+)+$(?<!^\/bin|\/dev|\/etc|\/mnt|\/opt|\/run|\/srv|\/sys|\/tmp|\/usr|\/var|\/lib|\/proc|\/sbin|\/root|\/boot|\/home|\/lib64|\/media|\/usr\/bin|\/usr\/lib|\/usr\/lib64|\/usr\/sbin|(\/usr\/bin)|(\/usr\/lib)|(\/usr\/lib64)|(\/usr\/sbin)$)";
    } else {
        return ""; // TODO: default value
    }
}

get osIsWindows(): boolean {
    // TODO: implement this
}

get osIsLinux(): boolean {
    // TODO: implement this
}

然后，在您的HTML中：

<input
             id="labelPath{{ i }}"
             name="labelPath{{i}}"
             type="text"
             #labelPath="ngModel"
             class="form-control"
             [(ngModel)]="diskItem.labelPath"
             [pattern]="pattern"
             [disabled]="isDisabled || i<=0"
             [required]
            />

（脚注：此答案的原始版本使用称为getPattern()的方法。正如评论中所讨论的，这是非标准的，因此我将其更新为使用{{1 }}访问者。）

Answer 2

尝试一下：

 if (navigator.appVersion.indexOf("Win") != -1) {
       this.pattern="[0-9][0-9]";
}
 if (navigator.appVersion.indexOf("Linux") != -1) {
this.pattern="^(\/[a-zA-Z0-9_-]+)+$(?<!^\/bin|\/dev|\/etc|\/mnt|\/opt|\/run|\/srv|\/sys|\/tmp|\/usr|\/var|\/lib|\/proc|\/sbin|\/root|\/boot|\/home|\/lib64|\/media|\/usr\/bin|\/usr\/lib|\/usr\/lib64|\/usr\/sbin|(\/usr\/bin)|(\/usr\/lib)|(\/usr\/lib64)|(\/usr\/sbin)$)"
}

和html

  <input
             id="labelPath{{ i }}"
             name="labelPath{{i}}"
             type="text"
             #labelPath="ngModel"
             class="form-control"
             [(ngModel)]="diskItem.labelPath"
             pattern="{{pattern}}"
             [disabled]="isDisabled || i<=0"
             [required]
            />

输入字段的动态模式（角度）

2 个答案: