0

我有一个带有 2 个 FormControls“名称”和“类型”的 FormGroup。Type 是一个选择 html 输入，带有使用 ngFor 循环生成的选项。因此，当我编辑我的元素时，会显示带有 FormGroup 的组件，它会加载我要编辑的元素并自动在名称输入字段中填写元素的名称。我尝试做的与 type 字段相同。

我的组件.html

<form [formGroup]="myForm" (ngSubmit)="onMyFunktion()">
  <div class = "form-group">
      <label for="name">Name</label>
      <input formControlName="name" type="text" id="name" class="form-control" required >
  </div>
  <div class="form-group">
    <label for="type">Type</label>
    <select formControlName="type" id="type" class="form-control"  required >
      <option *ngFor="let Type of types" value="Type.Id">{{Type.Name}}</option>
    </select>
  </div> 
  <button type="submit" [disabled]="!MyForm.valid"  class ="btn btn-primary">save</button>
  <button type="button" (click)="onBack()" class ="btn btn-success">Back</button>
</form>

我的组件.ts

ngOnInit()
  {
  this.MyForm = new FormGroup
  ({
    name: new FormControl(this.myElement.Name), 
    type: new FormControl() // myElement only has its Name and the Id of the type not the type name
  })
 }
4

1 回答 1

0

当您处理对象时，角度无法自动检测默认值，因此您必须添加如下compareWith属性：

<select formControlName="type" id="type" class="form-control"  required [compareWith]="byTypeId" >

在您的组件类中，您必须编写如下的 byTypeId 方法：

byTypeId(a, b) {
  return a === parseInt(b, 10);
}

PS：我假设你的类型 id 是一个整数

于 2018-05-16T12:46:05.150 回答