Javascript 如何根据下拉选择更改表单验证模式?
我正在为我们的一个项目在UI中设置表单验证。其中一个文本框需要根据先前下拉列表的选择具有不同的验证模式。例如,如果下拉选择为Javascript 如何根据下拉选择更改表单验证模式?,javascript,html,angular,validation,angular5,Javascript,Html,Angular,Validation,Angular5,我正在为我们的一个项目在UI中设置表单验证。其中一个文本框需要根据先前下拉列表的选择具有不同的验证模式。例如,如果下拉选择为name,则模式应为: pattern='[a-zA-Z ]+' pattern='[0-9 ]+` 如果它是编号,则应为: pattern='[a-zA-Z ]+' pattern='[0-9 ]+` 我在组件中设置了一个函数,用于根据该选择设置验证字符串: fields: string[] = []; validationPattern: string; pr
name
,则模式应为:
pattern='[a-zA-Z ]+'
pattern='[0-9 ]+`
如果它是编号
,则应为:
pattern='[a-zA-Z ]+'
pattern='[0-9 ]+`
我在组件中设置了一个函数,用于根据该选择设置验证字符串:
fields: string[] = [];
validationPattern: string;
private validationType(field: string[]) {
if (field.includes('number')) {
this.validationPattern = '[0-9]+';
return this.validationPattern;
} else if (field.includes('name')) {
this.validationPattern = '[a-zA-Z1-9][a-zA-Z0-9 ]+';
return this.validationPattern;
}
}
在HTML中,我有以下内容。setField是一个实际选择字段的函数;validationType是我试图用来为输入创建验证模式的工具:
<div ngbDropdownMenu>
<button
*ngFor="let selected of fields"
class="dropdown-item"
(click)="setField(selected); validationType(selected)">
{{ selected }}
</button>
</div>
{{selected}}
这是表单验证的输入:
<input
type="text"
id="value"
name="value"
placeholder="Value"
#value1="ngModel"
pattern=this.validationPattern
[(ngModel)]="profile.value">
到目前为止,我有两个问题:
this.validationPattern
读取为实际模式-即,单词this.validationPattern
,而不是相关值。无论我选择姓名还是号码,我输入的任何内容都是无效的要将
模式
属性绑定到验证模式
,请使用:
至于在一个事件处理程序中调用两个函数,我不认为这是一种不好的做法,特别是对于一个按钮单击事件,它没有那么频繁地触发。您的两个问题都是有效的一个-
validationPattern
变量[]
,因此无论您传递什么,它都将作为字符串值。如果你想得到一些动态值,你必须使用括号
<input
type="text"
id="value"
name="value"
placeholder="Value"
#value1="ngModel"
[pattern]="validationPattern" <!-- Get the dynamic value of validationPattern
[(ngModel)]="profile.value">