Question

我有这个带有多个表单控件的表单组：

myForm: FormGroup = new FormGroup({
    ...
    myControl: new FormControl(),
    ...
  });

表单控件myControl是这样的：

<mat-form-field class="col-large">
            <mat-select formControlName="myControl">
              <mat-option *ngFor="let data of dataMap" [value]="data.value">
                {{data.description}}
              </mat-option>
            </mat-select>
          </mat-form-field>

dataMap基本上是具有属性值和属性描述的对象的数组，它们都是字符串，因此对象的示例是：

{
  "value":"1",
  "description":"desc"
}

然后我有一个自动完成输入，可以在相同的dataMap上使用，每当用户开始输入时，它就会搜索数组的描述，仅提示与所写文本匹配的描述。然后，当用户选择一个选项时，它将调用一个方法，该方法从数组中检索对应的值并设置为myControl检索的值。预期的行为是，当选择了自动完成功能中的一个选项时，该值在myControl中进行了更改，并显示了一个新的说明。
问题是myControl的值已正确设置，但未显示所选选项。
我不明白的是，在ngOnInit方法中，我通过以下方式在地图中为myControl设置了默认值：

this.myForm.get('myControl').setValue("1");

，它会正确选择该选项并将其显示为选中状态。然后，在用于自动完成选择的回调方法中，我执行相同的操作，但是未选择它。表单控件为空白。
我已经检查了从自动完成中获得的值，该值存在于dataMap中。设置新值后，我还打印了myControl的值，它是正确的新值。

Answer 1

改为执行

让测试= { “ value”：“ 1”， “ description”：“ desc” }

this.myForm.get（'myControl'）。setValue（test）;

您应该将相同类型的对象传递给myControl

Angular 7无法设置垫选择表单控件的值

1 个答案: