gpt4 book ai didi

angular - 如何使用 formBuilder 在 angular2 中绑定(bind)选择下拉列表?

转载 作者:太空狗 更新时间:2023-10-29 18:13:31 24 4
gpt4 key购买 nike

我做了一些研究,我很惊讶地发现它并不像它应该的那样简单。

我知道有一些使用 ngModel 的方法。喜欢Bind and fetch dropdown list value in typescript and Angular2和别的。但我希望能够轻松地将我选择的选项绑定(bind)到我的 formControlName 变量。

这是我试过的:

.HTML

 <form id="myForm" name="father" [formGroup]="fatherForm" (ngSubmit)="createFather()">
<div class="row">
<select formControlName="pref" id="f">
<option value=null disabled selected>Prefijo</option>
<option *ngFor="let item of prefs" [ngValue]="hola">{{item.name}}</option>
</select>

</div>
</form>

.TS

fatherForm: FormGroup;  

this.fatherForm = this.formBuilder.group({
pref: ['AA']
});

this.prefs=[
{name: "AA"},
{name: "BB"}
];

默认值有效。但是当我选择BB的时候,还是选择了默认值。当默认值为 '' 时也会发生同样的情况

此方法由 Harry-ninh 在 Bind Select List with FormBuilder Angular 2 中建议

我做错了什么?

注意:当然,form中还有其他的input,为了简单起见忽略掉

编辑

我尝试在这个 plunkr 中使用完全相同的示例,但它也不起作用。 http://plnkr.co/edit/Rf9QSSEuCepsqpFc3isB?p=preview发送表单后,显示未触及值。

debug info

最佳答案

您好,请按以下步骤操作

<form id="myForm" name="father" [formGroup]="fatherForm">
<div class="row">
<select formControlName="pref" id="f">
<option value=null disabled selected>Prefijo</option>
<option *ngFor="let item of prefs" [value]="item.name">{{item.name}}</option>
</select>

</div>
<button type="submit">Submit</button>
</form>
<p>Value: {{ fatherForm.value | json }}</p>

name:string;
fatherForm : FormGroup;
prefs=[
{name: "AA"},
{name: "BB"}
];
constructor(fb:FormBuilder) {
this.fatherForm = fb.group({
pref : [this.prefs.name]
});
}

而且我还创建了工作 plunkr .

希望对你有帮助

关于angular - 如何使用 formBuilder 在 angular2 中绑定(bind)选择下拉列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43712963/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com