没有 Bootstrap 库的 Angular Formbuilder Select 和 Dropdown

Question

如何在 Angular 2 中使用 formbuilder、formgroup 构建选择？

目前我想到的是通过我创建的列表具有* ngfor的选项，而不是选择选项时，它更新了我在SELECT中获得的值。

HTML

<form [formGroup]="myForm" (ngSubmit)="submit()">
    <select  class="form-control"  >
      <option *ngFor="let pos of tabpositing" formControlName="tabposition" [value]="pos.name">{{pos.name}}</option>
    </select>
</form>

<div  style="  height: 150px; overflow: scroll;">
<pre><code>{{ myForm?.value | json }}</code></pre></div>
<div style="  height: 150px; overflow: scroll;">
       <pre> {{ widget | json }}</pre>
</div>

TS

public tabpositing: any  = [
                          {name: 'top', value: false},
                          {name: 'right',value: false},
                          {name: 'bottom',value: false},
                          {name: 'left',value: false}
                        ]
constructor(public _fb: FormBuilder) { }
this.myForm = this._fb.group({
 tabposition: new FormControl(''),
}),

我认为的其他选项是有一个通过循环运行并创建 formControl 等的函数，但无法弄清楚如何获取选择的 HTML

let tabpos : FormArray = new FormArray([]);
             for (let i = 0; i < this.tabposition.length; i++) {
                let fg = new FormGroup({});
                fg.addControl(this.tabposition[i].name, new FormControl(this.tabposition[i].value))
                tabpos.push(fg)
              }

 this.myForm = this._fb.group({
tabposition: tabpos

  });

Answer 1

您好，您可以保留您的选项标签，然后在选择中执行类似的操作

<select  class="form-control"  formControlName="tabposition"  >
      <option *ngFor="let pos of tabpositing" [value]="pos.name">{{pos.name}}</option>
</select>

和

this.form = this.fb.group({
  tabposition: ''
});

选中的选项会被转换成字符串，在form.controls.tabposition下

如果您想在选择更改时执行某些操作，只需添加

<select  (ngModelChange)="myFunction($event)"  class="form-control"  formControlName="tabposition"  >
      <option *ngFor="let pos of tabpositing" " [value]="pos.name">{{pos.name}}</option>
</select>

到组件上的选择和对应的功能