formArray 中的 formGroupName 不起作用，出現錯誤 -> 無法找到帶有路徑的控件：'fields -> 0 -> unit -> conversion_needed'

Question

我在 formArray 中添加 formGroupName 時遇到問題。 我想在每個表單數組對象中添加如下內容：

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:...
}

它看起來像“unit.conversion_need”