Question

输入验证可以使用固定模式正常工作，例如

<input type="number"
    [(ngModel)]="info.sortOrder"
    pattern="[0-9][0-9]"
    id="sortOrder" name="sortOrder" #sortOrder="ngModel"/>

通过函数更改要评估的模式时，验证始终失败。但是，调用函数“customPattern（）”。

<input type="number"
    [(ngModel)]="info.sortOrder"
    [pattern]="customPattern()"
    id="sortOrder" name="sortOrder" #sortOrder="ngModel"/>

使用

customPattern() { return "[1-9][0-9]"; }

这是一个错误还是不应该以这种方式工作？

Answer 1

我猜你错了，@ black 我建议您使用“反应形式”方法来达到期望的结果。

创建反应形式。
为例如（'number_validation'）添加控件名称。
（可选）使用与上面相同的formControlName（'number_validation'）注册HTML输入元素。
在component.ts文件中创建一个字段'regex'='[0-9] [0-9]'。
在HTML HTML输入元素标记中绑定[pattern] =正则表达式。
收听更改并根据需要更改正则表达式模式。

在ts文件中。

 someForm: FormGroup;

this.someForm= new FormGroup({
        'some_name': new FormControl('', [
          Validators.required])});

regex = /[0-9][0-9]/;

在HTML中：

 <input type="number"
    [pattern]=regex
    id="sortOrder"
    formControlName=some_name 
    name="sortOrder"/>

逻辑：

这取决于要求，您将如何动态更改正则表达式值。例如。

ngAfterViewInit() {
    this.someForm.get('some_name').valueChanges.subscribe(val => {
      if (val === 'anything') {
        this.regex = /change the regex/;
      } else if (val === 'anything_other') {
        this.regex = /change the regex/;
      }
    });
  }

希望它对您或其他开发人员有所帮助！：）

Answer 2

在您的组件中，只需定义一个如下所示的成员变量：

export class AppComponent {
 customPattern = '[1-9][0-9]';

在你的html中，使用这样的插值：

pattern = "{{customPattern}}"

这应该有效。

Angular 2和4中的动态模式验证

2 个答案: