Angular 没有 Bootstrap 库的 Formbuilder Select 和 Dropdown

Question

如何在 angular 2 中使用 formbuilder、formgroup 构建 select？

目前我想到的是有一个带有 *ngFor 的选项，它循环遍历我创建的列表，而不是当一个选项被 selected 时，它用我在我的中获得的值更新 FormControl 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 等的函数，但无法弄清楚如何为 select

获取 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 中执行类似

的操作

<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: ''
});

selected 选项将被转换为字符串并在 form.controls.tabposition

下

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

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

到select和组件上的相应函数

Angular 没有 Bootstrap 库的 Formbuilder Select 和 Dropdown

Angular Formbuilder Select and Dropdown without Boostrap library

formbuilder

dropdown

angular