Question

我有一个FormGroup，包含2个FormControls＆＃34; name＆＃34;和＆＃34;键入＆＃34;。 Type是一个select html输入，其中包含使用ngFor循环生成的选项。因此，当我编辑我的元素时，组件显示FormGroup，它会加载我想编辑的元素，并自动填写名称输入字段中的元素名称。我尝试做的与类型字段相同。

mycomponent.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>

mycomponent.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
  })
 }

Answer 1

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

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

并且在你的组件类中，你必须编写这样的byTypeId方法：

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

PS：我假设您的类型ID是整数

角度预选选择输入

1 个答案: