formGroupName внутри formArray не работает, возникает ошибка -> Невозможно найти элемент управления с путем: «поля -> 0 -> единица -> Conversion_needed»

Question

У меня проблема с добавлением formGroupName внутри formArray. Я хочу добавить в каждый объект массива формы что-то вроде этого:

unit: {
  conversion_needed: false,
  imperial: '',
  metric: ''
}

Это весь код внутри формы:

<div formArrayName="fields">
        <fieldset *ngFor="let field of fieldsArray.controls; let i = index" [formGroupName]="i">

            <div class="form--group">
                <div class="input--field">
                    <label>Name</label>
                    <input type="text" formControlName="name">
                </div>
            </div>

            <div class="form--group">
                <div class="input--field">
                    <label for="">Type</label>

                    <ng-select appearance="outline" labelForId="" [searchable]="false" formControlName="type">
                        <ng-option [value]="'string'">String</ng-option>
                        <ng-option [value]="'number'">Number</ng-option>
                        <ng-option [value]="'SingleSelect'">Single select</ng-option>
                        <ng-option [value]="'MultipleSelect'">Multiple select</ng-option>
                        <ng-option [value]="'boolean'">Boolean</ng-option>
                        <ng-option [value]="'metric_conversion_weight'">Metric conversion weight</ng-option>
                        <ng-option [value]="'metric_conversion_distance'">Metric conversion distance</ng-option>
                        <ng-option [value]="'metric_conversion_velocity'">Metric conversion velocity</ng-option>
                    </ng-select>
                </div>
            </div>

            <div formGroupName="unit"
                *ngIf="field.value.type  === 'metric_conversion_weight' || field.value.type  === 'metric_conversion_distance' || field.value.type  === 'metric_conversion_velocity'">
                <div class="form--group">
                    <input type="checkbox" formControlName="conversion_needed" />
                    Conversion needed
                </div>
            </div>

            <div class="form--group">
                <div class="input--field">
                    <label for="">Required</label>
                    <div class="control-group">
                        <label [for]="'required' + i">
                            <input [id]="'required' + i" type="checkbox" formControlName="required">
                            Check if it's required
                        </label>
                    </div>
                </div>
            </div>

            <div class="form--group">
                <div class="input--field">
                    <button type="button" class="btn btn--link" (click)="removeField(i)">Remove field</button>
                </div>
            </div>

        </fieldset>
    </div>

Я получаю следующую ошибку: Невозможно найти элемент управления с путем: «поля -> 0 -> единица измерения -> необходимое_ преобразование»

Answer 1

kresimir, неужели элементы твоего массива форм похожи?

{
  name:...
  type:...
  unit:{
     conversion_needed:...
  }
  required:...
}

Это похоже на extrange "unit.conversion_need"