Начальное значение раскрывающегося списка mat-select с использованием formControlName не отражается в пользовательском интерфейсе

Question

У меня есть раскрывающийся список mat-select, который создается динамически с помощью Form Builder и отображается в виде серии циклов и содержит начальное значение, но сам раскрывающийся список фактически не установлен.

const control = this.formBuilder.control(value, validators);
myForm.addControl(id, control);
debugger;

The html для отображения -

<mat-select [value]="getFormValue(input.id)" [formControlName]="input.name" [placeholder]="idForDebug">
    <mat-option *ngFor="let option of input.dropdownOptions" [value]="option.fieldValue">
        {{option.display}}
    </mat-option>
</mat-select>

Я также попробовал вышеупомянутое с / без предоставленного параметра [value], так как я уже использую [formControlerName]. Одинаковое поведение

getFormValue определяется как

public getFormValue(id) {
    debugger;
    return myForm.get(id).value;
}

Я подтвердил с помощью отладчика, что значение и идентификатор совпадают как при создании элемента управления, так и в методе getFormValue. Если все данные есть и предоставлены, почему значение раскрывающегося списка не установлено? Что бы мне не хватало?

Подтверждено через консоль и отладчик, все значения и идентификаторы совпадают во всех трех расположениях выше, но выпадающий список не выбран заранее.

- Я создал упрощенную версию this on stackblitz https://stackblitz.com/edit/angular-pggkbk

В этом живом примере я ожидаю, что раскрывающийся список будет предварительно заполнен значением 1, поскольку это то, что предоставляется при создании элемента управления через

const control = this.formBuilder.control(1, []);

решено

Я чувствую себя глупо, значения, поступающие из БД, были в виде строк, поэтому, когда я устанавливал значение раскрывающегося списка в строку, но сравнивал его с [значение] из dropdownOptions, которое представляло собой числа, они никогда не совпадали.

ParseInt (значение) и все получилось. Соус

Answer 1

На самом деле я не понимаю вашего вопроса. Я предполагаю, что у вас есть массив входных данных, таких как

inputs=[{
    name:'select',
    dropdownOptions:[
    {fieldValue: 'steak-0', display: 'Steak'},
    {fieldValue: 'pizza-1', display: 'Pizza'},
    {fieldValue: 'tacos-2', display: 'Tacos'}

    ]
  }]

и переменная "data" со значениями

  data:any={select:'pizza-1'}

Если вы используете переменную форму в NgOnInit, вы можете использовать некоторые как

  form=new FormGroup({})
  ngOnInit()
  {
    this.inputs.forEach(x=>{
      this.form.addControl(x.name,new FormControl(this.data[x.name]))
    })
  }

ну, вы можете присвоить значение formControl с первым значением опции

  this.form.addControl(x.name,new FormControl(x.dropdownOptions[0].fieldValue))

Затем вы отобразите форму как

<form [formGroup]="form">
    <div *ngFor="let input of inputs">
        <mat-form-field>
            <mat-label>Favorite food</mat-label>
            <mat-select  [formControlName]="input.name" [placeholder]="idForDebug">
                <mat-option *ngFor="let option of input.dropdownOptions" [value]="option.fieldValue">
                    {{option.display}}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </div>
</form>

, возьмите посмотрите на stackblitz . помните, чтобы дать значение FormControl не использовать [значение], просто измените значение элемента управления. Вы можете сделать это при создании формы или с помощью setValue