时间戳

首页 > 解决方案 > 使用 formControlName 的下拉垫选择的初始值未反映在 UI 中

angular - 使用 formControlName 的下拉垫选择的初始值未反映在 UI 中

问题描述

我有一个下拉 mat-select，它是通过 Form Builder 动态创建的，并显示在一系列循环中并提供了一个初始值，但实际上并没有设置下拉菜单本身。

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

要显示的 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 方法时，值和 id 都匹配。如果所有数据都存在并提供，为什么没有设置下拉值？我会错过什么？

通过控制台和调试器确认所有值和 ID 在上述所有 3 个位置都匹配，但未预先选择下拉列表。

-- 我在 stackblitz 上创建了一个简化版本 https://stackblitz.com/edit/angular-pggkbk

在这个实时示例中，我希望下拉列表中预先填充了该值1，因为这是通过创建控件时提供的

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

解决了

我觉得很傻，从数据库传入的值是字符串，所以当我将下拉值设置为字符串但将其与 dropdownOptions 中的 [value] 进行比较时，它们从未匹配。

ParseInt(value) 一切都解决了

标签： angularangular-material

解决方案

我真的不明白你的问题。我想你有一个输入数组，比如

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

    ]
  }]

和一个带有值的变量“数据”

  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]))
    })
  }

好吧，你可以用 option 的第一个值给 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 的值而不是使用 [value]，只需更改控件的值。您可以在创建表单时制作，或使用setValue

推荐阅读