如何在 Angular 中访问 formControl 的对象属性？答案

【问题标题】：How to access object property of a formControl in Angular?如何在 Angular 中访问 formControl 的对象属性？
【发布时间】：2019-07-15 05:49:59
【问题描述】：

我有一个带有对象数组的 Angular FormControl。一个对象看起来像：

{id: 'id', title: 'title'}

我在一个带有其他 formControls 的 formGroup 中有一个 formControl。

fc= null;    
this.fc= new FormControl(this.array);

this.form = this.formBuilder.group({
      fc: this.fc,
      ...
    });

现在在我的 html 中有一个垫子选择：

 <mat-select formControlName="fc" placeholder="Test" multiple>
                <mat-option *ngFor="let op of test" [value]="op.title">{{ op.title }}</mat-option>
              </mat-select>

我怎么说formControl应该使用对象的title属性来显示数组中的初始值？如果我只将数组映射到 title 属性，一切正常。

 this.fc= new FormControl(this.array.map(x=>x.title));

但我需要表单中的整个对象。

【问题讨论】：

标签： html angular form-control

【解决方案1】：

试试这个：

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

/** @title Select with multiple selection */
@Component({
  selector: 'select-multiple-example',
  templateUrl: 'select-multiple-example.html',
  styleUrls: ['select-multiple-example.css'],
})
export class SelectMultipleExample {
  test = [
    { id: '1', title: 'Title 1' },
    { id: '2', title: 'Title 2' },
    { id: '3', title: 'Title 3' },
    { id: '4', title: 'Title 4' },
    { id: '5', title: 'Title 5' },
  ];
  form: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.form = this.formBuilder.group({
      fc: [['2', '4']],
    });
  }
}


/**  Copyright 2019 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license */

在你的模板中：

<form [formGroup]="form">
  <mat-form-field>
    <mat-label>Toppings</mat-label>
    <mat-select formControlName="fc" multiple>
      <mat-option *ngFor="let item of test" [value]="item.id">{{item.title}}</mat-option>
    </mat-select>
  </mat-form-field>
</form>


<!-- Copyright 2019 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license -->

这里有一个Working Sample StackBlitz 供您参考。

【讨论】：

【解决方案2】：

如果你的 mat-option 是这样的

<mat-option *ngFor="let item of test" [value]="item.id">{{item.title}}</mat-option>

您的 formControl 必须是，例如 - 看到它是一个数组或字符串-

fc: [['2','4']]

如果你的 mat-option 是这样的

<mat-option *ngFor="let item of test" [value]="item">{{item.title}}</mat-option>

您的 formControl 必须是，例如，-看到这是一个对象数组-，在这种情况下，您需要使用对象的引用

fc: [this.test[1],this.test[3]] //<--use reference to the object

//be careful!!
//fc:[{id:'2',title:'Title2'},{id:'4',title:'Title 4'}] //<--ERROR

【讨论】：