如何将对象值作为参数动态传递到角度 8 中的 new FormControl()答案

【问题标题】：How to pass the object value dynamically as parameter into new FormControl() in angular 8如何将对象值作为参数动态传递到角度 8 中的 new FormControl()
【发布时间】：2019-11-30 11:27:57
【问题描述】：

我有一个下拉菜单，其数据来自循环。在这里我需要在页面加载和单击跨度时获取选定的值和选定的文本。我在这里使用反应式表单。为了进行默认选择，我正在使用新的 FormControl （1），一切正常，我在控制台中得到了结果。但是当我从我的 json 中删除数组的第一个对象并重新加载页面时，它的创建错误，因为我在 FormControl 中硬编码为 1，如果我更改为 FormControl (2) 它工作正常。但我需要动态传递它，以便它可以与任意数量的对象一起使用。这是下面的代码和我创建的演示示例https://stackblitz.com/edit/angular-lwrvvz?file=src%2Fapp%2Fapp.component.ts

app.component.ts

    import { Component } from '@angular/core';
    import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ]
    })
    export class AppComponent  {
      name = 'Angular';
      registerForm: FormGroup;
      statusdata: any;
      constructor(private formBuilder: FormBuilder)
      {
          this.registerForm = this.formBuilder.group({
                 title: new FormControl(1)
         });

      }
      ngOnInit() {

          this.statusdata = [{"groupid":1,"groupname":"project1"},{"groupid":2,"groupname":"project2"},{"groupid":3,"groupname":"project3"}];
          console.log('selected Value', this.registerForm.get('title').value);
          console.log('selected name', this.statusdata.filter(v => v.groupid == this.registerForm.get('title').value)[0].groupname);
      }
     getSelectedVal(){
        console.log('selected Value', this.registerForm.get('title').value);
        console.log('selected name', this.statusdata.filter(v => v.groupid == this.registerForm.get('title').value)[0].groupname);

     }
    }

app.component.html
-----------------
<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happenss :)
</p>
<div>
<form [formGroup]="registerForm">
<select formControlName="title" class="form-control">

                        <option *ngFor="let grpdata of statusdata" value="{{grpdata.groupid}}">{{grpdata.groupname}}</option>

                    </select>
 </form>
</div>
<p>home works!</p>
<div><span (click)="getSelectedVal()">Click here</span></div>

【问题讨论】：

你如何获得动态值，这会通过url传递吗？你怎么知道要预选什么值？
不，我需要像 new FormControl(1) 这样的整数传递，现在我将 1 作为硬编码整数传递。只需删除第一个对象{"groupid":1,"groupname":"project1"} ，从 json 数组并检查，我只需要解决该错误，否则它应该适用于任意数量的对象。

标签： html angular typescript

【解决方案1】：

您可以将表单更新为使用patchValue 方法来选择statusdata 数组中的第一组。这样您就不必对任何内容进行硬编码。

示例：https://stackblitz.com/edit/angular-ggnhzq

（如果有 0 个组，我添加了一个空条件来检索 groupname）

【讨论】：