Блог

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

Данные поступают в 2 разных массива, один из которых содержит все флажки (RULE_LOOKUP_ID, ОПИСАНИЕ), а другой представляет собой просто список идентификаторов, которые были ранее проверены («RULE_IDS»: [1, 3]).

У меня возникли некоторые проблемы с ее отображением, предполагая, что я неправильно настраиваю форму.

Я создаю formgroup как:

   this.ruleAssignmentFormGroup = this.formBuilder.group({
  RULE_LOOKUP_ID: this.detail.RULE_LOOKUP_ID,
  TITLE: new FormControl(this.detail.TITLE),
  checkedRules: this.formBuilder.array([]),
  allRules: []
});
  

Проверенные правила будут содержать идентификаторы тех, которые проверяются, и allRules будут содержать все.

заполняем ее:

         let control = <FormArray>this.ruleAssignmentFormGroup.controls.checkedRules;
    foundItem.RULE_IDS.forEach(x => {
      control.push(this.formBuilder.group({
        RuleLookupChkBox: new FormControl(x),
      }));
    });
  

моя форма выглядит как:

   <form [formGroup]="ruleAssignmentFormGroup" autocomplete="false" novalidate class="form-horizontal">
<div class="card-body form-styles">
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <label>{{ruleAssignmentFormGroup.controls['TITLE'].value}}</label>
      </div>
      <div formArrayName="checkedRules">
        <div class="form-group">
          <div *ngFor="let item of ruleAssignmentFormGroup.get('allRules'); let i=index">
            <div [formGroupName]="i">
              <input type="checkbox" formControlName="RuleLookupChkBox" [value]="item.RuleLookupId">{{item.DESCRIPTION}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
  

форма выдает ошибки при ее появлении:

Не удается найти другой поддерживающий объект ‘[object Object]’ типа ‘object’. ngFor поддерживает привязку только к повторяющимся объектам, таким как массивы.

и

Не удается найти элемент управления с путем: ‘checkedRules -> 1’

Не удается найти элемент управления по пути: ‘checkedRules -> 1 -> RuleLookupChkBox’

данные, похоже, правильно заполнены в ruleAssignmentFormGroup. есть ли другой способ заставить это работать?

• Вам нужно инициировать все правила как FormArray: this.formBuilder.array([])
• Я бы поставил * ngIf в тег формы, чтобы убедиться, что он не попытается выполнить рендеринг до возврата данных
  • Предложение: `*ngIf=»foundItem amp;amp; foundItem.RULE_IDS» или вы можете задать логическое значение в конце вызова API и указать это свойство в *ngIf
• ruleAssignmentFormGroup.get('allRules') вернет экземпляр AbstractControl. Вам нужно установить *ngFor на его элементах управления, которые представляют собой массив.
  • Предложение: *ngFor="let item of ruleAssignmentFormGroup.controls.allRules.controls"