Заполнение выбранного элемента в ng-select, который вложен в formarray - PullRequest
Новая
       40

Заполнение выбранного элемента в ng-select, который вложен в formarray

0 голосов
/ 17 декабря 2018

У меня есть 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, потому что мы можем назначить formControlName и [(ngModel)] для одного и того же ng-select, но поддержка того же самого в v7 удалена.

Как может текущий кодбыть изменен, чтобы сделать его совместимым с v7.

Ссылка: https://next.angular.io/api/forms/FormControlName#use-with-ngmodel

...