Question

我有一些功能可以动态分配验证

// set validation from sports response.
  private static setValidation(sportsItem: SportsFormResponse, sportsForm: FormGroup): void {
    const validationTypes: ValidatorFn[] = [];
    // if regex pattern got from questionnaire response.
    if (sportsItem.validation) {
      validationTypes.push(Validators.pattern(sportsItem.validation));
    }
    // if sportsItem is required true.
    if (this.checkBooleanPropertyExistForValidation(sportsItem.isRequired) === true) {
      validationTypes.push(Validators.required);
    }
    if (validationTypes.length > 0) {
      sportsForm.controls[sportsItem.questionId]
        .setValidators(validationTypes);
    }
  }

我正在得到这样的回应

{
      "sportsId": 5473,
      "label": "FVC",
      "answerValue": null,
      "answerCode": null,
      "sportsTypeId": 9,
      "lookupTypeId": null,
      "validation": "^(8\\\\.[0-5]|(0\\\\.0[1-9]|0\\\\.[1-9]([0-9]?)|[1-7]\\\\.[0-9]{1,2}|8\\\\.(?:[0-4][0-9]|50)))$",
      "validationMessage": "{“Please provide a valid result for the predicted FVC. This should be between 0.01 - 8.50"}",
      "sportsCode": "R94",
      "helperText": null,
      "isReadOnly": false,
      "isRequired": true,
      "cssClass": null
    },

在这里，当我对值进行硬编码并放入此函数然后会正常工作时会发生什么

if (sportsItem.validation) {
          validationTypes.push(Validators.pattern("^(8\\\\.[0-5]|(0\\\\.0[1-9]|0\\\\.[1-9]([0-9]?)|[1-7]\\\\.[0-9]{1,2}|8\\\\.(?:[0-4][0-9]|50)))$"));
        } 

but when its being assigned dyncmaiclly, validation doesnt work.

if (sportsItem.validation) {
          validationTypes.push(Validators.pattern(sportsItem.validation));
        }

我已经调试了字符串（sportsItem.validation）完全正常。我不确定动态验证插入有什么问题。

有人可以给我一个提示吗？

Answer 1

我已在stackblitz示例中添加了您的代码，并且该代码在该示例中有效。为此，我只采用了一个formControl。我已经通过了仅接受字母的正则表达式。您可以使用提到的正则表达式尝试该示例。

我已经在输入HTML中像这样传递了（keyup）=“ onInputChange（）”：

boxplot(var1~months,data=mytimeseries1, xlab="Months", ylab="First variable", main="Box plot of variable 1")

boxplot(var1~dates$months,data=mytimeseries1, xlab="Months", ylab="First variable", main="Box plot of variable 1")

并在ts文件中添加此方法，如下所示：

 <input type="text" formControlName="userName" class="form-control" (keyup)="onInputChange()" />

Working Example

Answer 2

我认为问题出在正则表达式模式中的转义序列。如果您的后端正在将\\\\作为JSON中模式字符串的子集发送，并且在代码中的某个位置，此响应将被JSON.parse转换，它将转换为\\，因为JSON.parse将就像正则表达式一样，将序列作为转义序列。最终，它匹配一个反斜杠，而您期望两个反斜杠。

所以，改变；

validationTypes.push(Validators.pattern(sportsItem.validation));

进入

validationTypes.push(Validators.pattern(sportsItem.validation.replace(/\\/g, "\\\\")));

可能会解决您的问题。

我在此stackblitz中测试了不同的组合，但这有点模棱两可，因为在编辑器中模仿JSON响应时，转义序列分为三个级别处理；字符串转义序列，JSON转义序列和RegExp转义序列。因此，很难重现完全相同的问题，但是它给出了正在发生的事情的想法。

如果验证模式是动态分配的，则setValidators不起作用

2 个答案: