首页 文章

没有Boostrap库的Angular Formbuilder Select和Dropdown

提问于
浏览 次
1

如何在角度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

  });
angular dropdown formbuilder

1 回答

  • 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>

    选择和组件上的相应功能

    回复于

相关问题