Angular 2+ Динамическое создание форм ввода с использованием шаблонно-управляемых форм работает в производственных ошибках при модульном тестировании - PullRequest
0 голосов
/ 29 ноября 2018

Я пытаюсь создать динамическую форму, которая генерируется и заполняется предыдущими выборами пользователем.Каждый профиль, выбранный пользователем, содержит массив Config, который циклически повторяется для создания последующих входных данных.

Объект конфигурации выглядит примерно так:

 {
      Description: "A name for your security control, can have a maximum of 64 characters"
      MaxLength: 64
      Name: "Name"
      Pattern: "^(.{1,64})$"
      Type: "text"
 }

Все это прекрасно работает во время производства, но когда я пытаюсь запустить модульный тест, я получаю ошибку:

 Error: If ngModel is used within a form tag, either the name attribute must be set or the form
  control must be defined as 'standalone' in ngModelOptions.

Я задаю имя динамически, поэтому не понимаю, почему это не работает.

 <div class="sc-config-form__input" *ngFor="let config of profile.Config">
      <label *ngIf="!config.Conditional || isConditionMet(config)" class="cloud-grey-label fillLabel" for="sc{{config.Name}}-text">{{config.Name}}</label>
      <input *ngIf="(!config.Conditional || isConditionMet(config)) && (!config.Type || config.Type =='text')"
              maxlength="{{config.MaxLength}}"
              name="{{config.Name}}"
              [ngModel]="config.Default"
              type="text"  
              id="sc{{config.Name}}-text"
              placeholder="{{config.Name}}"
              pattern="{{(config.Pattern ? config.Pattern : '')}}"
              title="{{config.Description}}"
              [required]="config.Required"
       />
 />

Я также пытался использовать «let i = index» и динамически добавлять индекс в атрибут name.Это позволяет ему пройти тест, но тогда имя моего элемента управления неверно, и он не работает в производстве по множеству причин.

Есть ли более простой способ исправить это?

1 Ответ

0 голосов
/ 07 декабря 2018

Внутри вашего входного тега вам нужно добавить

[ngModelOptions]="{standalone: true}"

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...