Angular - привязка к formControlName при изменении области действия ng-шаблона

#angular #templates #data-binding #scope

#angular #шаблоны #привязка к данным #область действия

Вопрос:

У меня есть angular ng-template, который правильно присваивает значение индекса formControlName, когда шаблон находится внутри его родительского FormArray, но не может этого сделать при перемещении за пределы массива.

Работает следующее:

     <div formArrayName="searchLimits" *ngIf="!sectionCollapseState?.searchLimits">

      <!-- template inside array -->

      <ng-template #checkboxSetTemplate let-upper="displayCount" let-sectionName="sectionName">
        <div *ngFor="let item of [0, 1]; let i = index;"
          class="col-md-12">
          <label [ngClass]="this.modelService.getClassMap(item)">
            
            <!-- 'ng-reflect-name' is assigned 'i' in rendered page, as expected -->
            <input type="checkbox" [formControlName]="i" />
              ...
          </label>
        </div>
      </ng-template>
    </div>

но следующее не:

   <div formArrayName="searchLimits" *ngIf="!sectionCollapseState?.searchLimits">
  </div>

  <!-- template outside of array -->

    <ng-template #checkboxSetTemplate let-upper="displayCount" let-sectionName="sectionName">
      <div *ngFor="let item of [0, 1]; let i = index;"
        class="col-md-12">
        <label [ngClass]="this.modelService.getClassMap(item)">
            
          <!-- 'ng-reflect-name' is assigned 'i' in rendered page, as expected -->
          <input type="checkbox" [formControlName]="i" />
            ...
        </label>
      </div>
    </ng-template>

Следующая директива, которая находится внутри массива, использует приведенный выше шаблон:

 <div>
  <ng-template [ngTemplateOutlet]="checkboxSetTemplate" [ngTemplateOutletContext]="{displayCount: SearchLimits?.length,
          sectionName: SearchLimits}">
  </ng-template>
</div>

Связанный машинописный текст:

   private buildForm() {
    this.searchForm = new FormGroup({
      refinements: this.formBuilder.group({
        searchLimits: this.formBuilder.array([]),
        keywords: new TextboxControl(null)
      })
    }, this.searchService.formHasUserDataValidator());
  }

Может кто-нибудь, пожалуйста, дайте мне знать, как я могу создать рабочий шаблон вне области действия массива?

Большое вам спасибо,

Стержень

1. попробуйте использовать [formControl]="searchLimits.at(i)" (если у вас есть getter searchLimits, которые возвращают FormArray) или [formControl]="yourForm.get('searchLimits' i)"

2. Спасибо за ваш комментарий, Элизео. Я сделал так, как вы предлагаете, но это не работает. На самом деле, значение ‘i’ доступно в моем исходном коде, но не присваивается ‘FormControl’. При выполнении неисправного кода генерируется сообщение «Не удается найти элемент управления с помощью пути «уточнения -> 0».

3. извините, это [formControl]="yourFrom.get('searchLimits.' i)" — см. Точку в конце «searchLimits»

Ответ №1:

Поскольку formControlName находится за пределами родительской FormGroup, он не работает.

Попробуйте это:

измените [formControlName] ===> [FormControl] .

 <!-- template outside of array -->
<ng-template #checkboxSetTemplate let-upper="displayCount" let-sectionName="sectionName">
  <div *ngFor="let item of [0, 1]; let i = index;"
    class="col-md-12">
    <label [ngClass]="this.modelService.getClassMap(item)">
      <!-- 'ng-reflect-name' is not present in rendered page, but is expected -->
      <input type="checkbox" [formControl]="i" />
        ...
    </label>
  </div>
</ng-template>

1. Спасибо за ваш ответ. Я внес это изменение, но результат тот же. Я добавлю машинописный текст, показывающий структуру, к моему исходному сообщению.

2. Если это возможно, можете ли вы создать stackblitz?