带有formControlName的Angular 2选择标签不起作用答案

【问题标题】：Angular 2 select tag with formControlName not working带有formControlName的Angular 2选择标签不起作用
【发布时间】：2018-06-27 16:03:10
【问题描述】：

带有 formControlName 的 Angular 2 选择标签不起作用。 pmsList 的数据如下：[{id:1,pms:'test'},.......] 但是当我在构造函数中设置时：

this.pms.setValue({id:1,pms:"test"})

那么它不会反映 html 页面上的值。

这是我的 html 代码：

<select formControlName="pms" class="form-control down-arrow">
  <option value="">Select</option>
  <option *ngFor="let item of pmsList">{{item.pms}}</option>
</select>

【问题讨论】：

您是否在控制台中看到任何错误？
提交用于创建表单的代码。可能有很多东西。
你叫什么表格？？你能发布你的 TS 文件吗？

标签： javascript angular angular2-forms

【解决方案1】：

确保您正在执行所有这些操作：

import { FormBuilder, FormGroup } from '@angular/forms';

public form: FormGroup;

constructor(private fb: FormBuilder) { 
    this.form = fb.group({
      pms: 'test'
    });
}

<form [formGroup]="form">
    <select formControlName="pms" class="form-control down-arrow">
        <option value="">Select</option>
        <option *ngFor="let item of pmsList">{{item.pms}}</option>
    </select>
</form>

【讨论】：

【解决方案2】：

有什么不对吗？您从this.pms 开始，然后在setValue 中更新pms。

应该是这样的（将您的表单组称为myFormGroup）：

this.myFormGroup.setValue({id:1,pms:"test"})

【讨论】：

【解决方案3】：

试试这个：
用您的表单名称更改 myForm

this.myForm.get('pms').patchValue({id:1,pms:"test"});

【讨论】：

【解决方案4】：

最近使用 Angular 7 和材料我遇到了同样的问题，我的解决方案是强制返回一个字符串到 FormGroup

createCategoryForm(): FormGroup
{
    return this._formBuilder.group({
        id: [this.cat.id],
        name: [this.cat.name],
        type: [this.cat.type],
        parent_id: ["" + this.cat.parent_id]
    });
}

然后，为了测试，我已经修复了 2 个 ID 为 1 和 2 的选项

<div fxLayout="row" fxLayoutAlign="start start">
            <mat-form-field appearance="outline" fxFlex>
                <mat-label>Parent</mat-label>
                <mat-select name="parent_id" formControlName="parent_id">
                    <mat-option value="1">1</mat-option>
                    <mat-option value="2">2</mat-option>
                </mat-select>
            </mat-form-field>
        </div>

【讨论】：