在嵌套在formarray

Question

我有一个FormArray，它是一个FormGroups数组

每个FormGroup都有1个字段指向ng-select下拉列表

问题： 在用户界面的FormGroup中填充ng-select下拉菜单中的选定项

HTML代码

<form [formGroup]="ruleForm">

        <mat-grid-list cols=2 rowHeight="5:1" gutterSize="0.75em">
          <mat-grid-tile [colspan]=1 [rowspan]=1>
            <mat-form-field>
              ......
            </mat-form-field>
          </mat-grid-tile>
          <mat-grid-tile [colspan]=2 [rowspan]=1>
            <mat-form-field>
              ...
            </mat-form-field>
          </mat-grid-tile>
        </mat-grid-list>

        <query-builder [formControl]='conditionFormControl' [config]='ruleDimensions'>
        </query-builder>

        <mat-grid-list cols="2" rowHeight="5:1" gutterSize="0.75em">
          <mat-grid-tile [colspan]=2 [rowspan]=2 class="parameters-select">
            ...
          </mat-grid-tile>
          <div *ngFor="let param of parameterValues.controls; let paramIndex=index">
            <mat-grid-tile [colspan]=2 [rowspan]=1 class="parameters-list">
              <div formArrayName="parameterValues" class="parameter-values">
                <div formGroupName="{{paramIndex}}">
                  <mat-grid-list cols=3 rowHeight="5:1" gutterSize="0.75em" class="parameters-list-mat-grid-list">
                    <mat-grid-tile [colspan]=1 [rowspan]=1>
                      <mat-form-field>
                        <input matInput formControlName="name" [errorStateMatcher]="paramNameMatcher" />
                      </mat-form-field>
                    </mat-grid-tile>
                    <mat-grid-tile [colspan]=1 [rowspan]=1 class="action-select">
                      <ng-select placeholder="Select action" #actionSelect name="actionSelect" [items]="action$" dropdownPosition="bottom"
                        [selectOnTab]="true" bindLabel="" labelForId="" formControlName="action" [(ngModel)]="selectedAction[paramIndex]">
                        <ng-template ng-option-tmp let-item="item">
                          <span>{{ item }}</span>
                        </ng-template>
                      </ng-select>
                    </mat-grid-tile>
                    <mat-grid-tile [colspan]=1 [rowspan]=1 class="">
                      <mat-form-field *ngIf="param.value.action !== 'REMOVE'">
                        <input matInput placeholder="Value" formControlName="value" [errorStateMatcher]="paramValueMatcher" />
                        <!-- <mat-error *ngIf="parameterValueFormControl.hasError('pattern') && !parameterValueFormControl.hasError('required')">
                          {{ verbiage.input.error.invalidValue }}
                        </mat-error>
                        <mat-error *ngIf="parameterValueFormControl.hasError('required')">
                          {{ verbiage.input.error.emptyValue }}<strong>&nbsp;{{ verbiage.input.error.required }}</strong>
                        </mat-error> -->
                        <mat-error>{{ verbiage.input.error.invalidValue }}</mat-error>
                      </mat-form-field>
                      <mat-icon *ngIf="param.value.action !== 'REMOVE'" class="info-icon" matTooltip="Value type : {{ param.value.type }}"
                        [matTooltipPosition]="'right'">info</mat-icon>

                    </mat-grid-tile>
                  </mat-grid-list>
                </div>
              </div>
            </mat-grid-tile>
          </div>
        </mat-grid-list>

        <mat-grid-list cols="4" rowHeight="4:1" gutterSize="0.75em">
          <mat-grid-tile [colspan]=4 [rowspan]=1 class="footer-actions">
            <button type="submit" mat-raised-button color="primary" (click)="saveRule()">Save Rule</button>
          </mat-grid-tile>
        </mat-grid-list>

      </form>

TS代码

this.ruleForm = this.fb.group({
  condition: this.conditionFormControl,
  parameterValues: this.fb.array([{
     this.fb.group({
        name: '',
        action: '',
        value: ''
     })
  }])

上面的代码直到Angular v6都可以使用，因为我们可以在同一ng-select上分配formControlName和[（ngModel）]，但是在v7中已不再支持相同的功能。

如何更改当前代码以使其与v7兼容。

参考：https://next.angular.io/api/forms/FormControlName#use-with-ngmodel