Question

如何在角度2中使用formbuilder，formgroup构建一个select？

目前我想到的是有一个带有* ngFor的选项，它循环遍历我创建的列表，而且当选择了一个选项时，它会使用我在select中获得的值更新FormControl。

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>

选择组件上的选择和相应的功能

没有Boostrap库的Angular Formbuilder Select和Dropdown

1 个答案: