没有 Bootstrap 库的 Angular Formbuilder Select 和 Dropdown

Posted 2023-02-22

【中文标题】没有 Bootstrap 库的 Angular Formbuilder Select 和 Dropdown

【英文标题】：Angular Formbuilder Select and Dropdown without Boostrap library

【发布时间】：2017-11-01 21:03:59

【问题描述】：

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

  );

【参考方案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>

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

【讨论】：

我得到空白选择下拉菜单。有没有办法提供一个 plunker？

我得到的错误是 Error: No value accessor for form control with name: 'tabposition

找到了bug，问题是你得到了重复的formControlName="tabposition"

是的，我没看到你也把它放在选项里很抱歉