Angular 5 模式验证不适用于动态 react 形式

Question

我正在尝试使用具有正则表达式模式 ##.##.##.## 的 Angular react 形式来实现字段验证。对于某些模式，它不起作用。我尝试了以下输入 12.25.36.25 验证失败，测试了模式 (^\d{2}.\d{2}.\d{2}.\d{2 }$) 与 regextester效果很好。我不确定这里出了什么问题。非常感谢任何帮助。

这是 StackBlitz .

Answer 1

原因是您忘记在 class question-base 中添加一个名为 pattern 的字段。 这是代码:

export class QuestionBase<T> {
  ...
  pattern: string;

  constructor(options: {
      ...
      pattern?: string
    } = {}) {
    ...
    this.pattern = options.pattern || null
  }
}

另一个问题是##.##.##.## 不是有效数字。您需要将该输入更改为 text 类型。最后，如果您的模式是正则表达式，则需要使用 javascript 的正则表达式类型而不是字符串。将您的模式替换为 /^\d{2}.\d{2}.\d{2}.\d{2}$/

编辑:模型的最终形式应该是:

new TextboxQuestion({
        key: 'version',
        label: 'Release Number',
        type: 'text',
        required: true,
        order: 4,
        pattern: /^\d{2}.\d{2}.\d{2}.\d{2}$/ // needed format: ##.##.##.##
 })