在Angular 4中选择具有反应形式的下拉列表的值(Value of select drop down list with reactive forms in Angular 4)
我使用Angular 4中的ReactiveForms模块创建了一个表单。在我的.ts文件中:
myForm: FormGroup; dataTypes: FormArray; ngOnInit() { this.myForm = new FormGroup({}); this.dataTypes = new FormArray([ new FormControl("A"), new FormControl("B"), new FormControl("C") ]); this.myForm.addControl('dataTypes', this.dataTypes); } onSubmit() { console.log(this.myForm.value); }
并在我的HTML:
<form [formGroup]="myForm" (ngSubmit)=onSubmit()> <select name="datatypes" id="datatypes" formArrayName="dataTypes"> <option *ngFor="let dataType of myForm.get('dataTypes').controls; let dataIndex=index" [ngValue]="dataIndex"> {{ dataType.value }} </option> </select> <button type="submit">Submit</button> </form>
在点击提交按钮时,我试图控制登录提交表单的值。 带有下拉列表的表单显示正确。 第一步是提取用户选择的drop drop列表的值。 但是console.log给出了一个包含所有三个值的数组,而不是所选的值。 myForm.value如何在提交时只有选定的dataTypes值?
I created a form using ReactiveForms module in Angular 4. In my .ts file:
myForm: FormGroup; dataTypes: FormArray; ngOnInit() { this.myForm = new FormGroup({}); this.dataTypes = new FormArray([ new FormControl("A"), new FormControl("B"), new FormControl("C") ]); this.myForm.addControl('dataTypes', this.dataTypes); } onSubmit() { console.log(this.myForm.value); }
And in my html:
<form [formGroup]="myForm" (ngSubmit)=onSubmit()> <select name="datatypes" id="datatypes" formArrayName="dataTypes"> <option *ngFor="let dataType of myForm.get('dataTypes').controls; let dataIndex=index" [ngValue]="dataIndex"> {{ dataType.value }} </option> </select> <button type="submit">Submit</button> </form>
On clicking the submit button, I am trying to console log the value of the form submitted. The form with the drop down list is displayed correctly. The first step is to extract the value of the drop drown list selected by the user. But the console.log gives an array with all the three values and not the value selected. How will the myForm.value have only the selected value of dataTypes on submit?
原文:https://stackoverflow.com/questions/48379209
满意答案
如果您有一个名为IngredientType的表单,您可以将其嵌入父表单中,如下所示:
$builder->add('ingredients', new IngredientType());
这对于可以多次重复使用的表单部分非常有用(即联系信息字段,在几种类型的表单中可能相同)
这是一个更全面的例子: http : //symfony.com/doc/current/cookbook/form/form_collections.html
If you have a form called IngredientType, you can embed it in a parent form like this:
$builder->add('ingredients', new IngredientType());
This is super helpful for portions of forms that may be reused more than once (i.e. contact info fields, which may be identical in several types of forms)
Here's a more thorough example: http://symfony.com/doc/current/cookbook/form/form_collections.html
相关问答
更多Symfony2嵌入了一系列表单(Symfony2 Embed a Collection of Forms)
在Symfony2中嵌入表单集合时出错(Error when embed a collection of Forms in Symfony2)
symfony2手动嵌入表单(symfony2 embed forms manually)
Symfony嵌入式表单 - 可能不显示嵌入式表单的“父”标签?(Symfony embedded form - possible to NOT show embedded form's “parent” label?)
Symfony2嵌入式表单(Symfony2 Embedded Forms)
在Symfony2中嵌入一个集合类型(Embed a collection type in Symfony2)
在Symfony中手动创建表单(Creating a form manually in Symfony)
Symfony2嵌入了所有FOSUserBundle表单(Symfony2 embed all FOSUserBundle forms)
Symfony2嵌入表单值(Symfony2 Embed form values)
Symfony2表单文件夹(Symfony2 Form folder)
相关文章
更多Angular实践----前言与概览
Struts2标签select的使用
HTML5 Drag and Drop【HTML5教程 - 第六篇】
源码解读Mybatis List列表In查询实现的注意事项
Python 列表(list)操作
Select2在Bootstrap 3 Modal框中不能搜索的解决方法
List用完后需要赋null吗
hibernate 对list修改
FreeMarker集合(List、Map)
java List排序一
最新问答
更多如何在Laravel 5.2中使用paginate与关系?(How to use paginate with relationships in Laravel 5.2?)
linux的常用命令干什么用的
由于有四个新控制器,Auth刀片是否有任何变化?(Are there any changes in Auth blades due to four new controllers?)
如何交换返回集中的行?(How to swap rows in a return set?)
在ios 7中的UITableView部分周围绘制边界线(draw borderline around UITableView section in ios 7)
使用Boost.Spirit Qi和Lex时的空白队长(Whitespace skipper when using Boost.Spirit Qi and Lex)
Java中的不可变类(Immutable class in Java)
WordPress发布查询(WordPress post query)
如何在关系数据库中存储与IPv6兼容的地址(How to store IPv6-compatible address in a relational database)
是否可以检查对象值的条件并返回密钥?(Is it possible to check the condition of a value of an object and JUST return the key?)
Copyright ©2023 peixunduo.com All Rights Reserved.粤ICP备14003112号
本站部分内容来源于互联网,仅供学习和参考使用,请莫用于商业用途。如有侵犯你的版权,请联系我们(neng862121861#163.com),本站将尽快处理。谢谢合作!