setValidators не работает, если шаблон проверки назначается динамически - PullRequest
Новая
       14

setValidators не работает, если шаблон проверки назначается динамически

0 голосов
/ 01 июля 2019

У меня есть какая-то функция, где я назначаю валидацию динамически 

// 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) идет отлично.Я не уверен, в чем проблема с динамической вставкой проверки.

Может кто-нибудь дать мне подсказку для этого?

Ответы [ 2 ]

1 голос
/ 02 июля 2019

Я добавил ваш код в примере stackblitz, и он работает в этом примере. Я взял только одну форму управления для этого. Я прошел регулярное выражение, которое принимает только алфавиты. Вы можете попробовать этот пример с вашим упомянутым регулярным выражением.

Я передал (keyup) = "onInputChange ()" во входном HTML, например: 

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

И добавил этот метод в файл ts так: 

onInputChange() {
    console.log("onInputChange Called");
    this.setValidation("^[A-Za-z]+$", this.userFormGroup)
  }

Рабочий пример

0 голосов
/ 02 июля 2019

Я думаю, что проблема возникает из escape-последовательностей в шаблоне регулярных выражений. если ваш бэкэнд отправляет \\\\ как подмножество шаблонной строки в JSON и где-то в вашем коде этот ответ преобразуется в JSON.parse, он преобразуется в \\, потому что JSON.parse обрабатывает эту последовательность как escape-последовательность, так же как и регулярное выражение , В конце концов он соответствует одному обратному слешу, где вы ожидаете два.

Итак, меняется;

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

в

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

может решить вашу проблему.

я тестировал различные комбинации в этом stackblitz , но это немного неоднозначно, потому что при имитации ответа JSON в редакторе escape-последовательности обрабатываются на трех уровнях; escape-последовательности строк, escape-последовательности JSON и escape-последовательности RegExp. Так что трудно воспроизвести точно такую ​​же проблему, но она дает представление о том, что происходит.

...