首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >恢复数组中的表单域

恢复数组中的表单域
EN

Stack Overflow用户
提问于 2020-07-16 06:41:33
回答 1查看 17关注 0票数 1

这是我的表格:

代码语言:javascript
运行
复制
chartform = this.formbuilder({
 id:[],
 typeOfchart : [],
 indicators:[]
 })

HTML:

代码语言:javascript
运行
复制
<form [formGroup]="chartform">
 <input formControlName = "id" >put an id </input>
 <input formControlName = "typeOfchart" >type of the chart </input>
 <select  formControlName = "indicators">
   <option  *ngFor="let indicator of metricindicators" value="indicator">{{indicator}}</option>
 </select>
</form>

我想在一个数组中恢复"indicators“的值,所以在component.ts中尝试了一下:

代码语言:javascript
运行
复制
let indexes = chartform(['indicators']).value
console.log("indexes",indexes.length) // when I input for example "performance" in the field 
 "indicators" the console display "indexes 11" while it must display "indexes 1" it show me the 
  number of caracters not the number of elements in the array

我尝试了另一种方法:

代码语言:javascript
运行
复制
let indexes : any = []
indexes.push(chartform(['indicators']).value)
console.log("indexes",indexes.length) // here it gives me "indexes 1" when I input"performance" but 
when I put "performance,currency" in the field "indicators" the
console display "indexes 1" while it must display "indexes 2"

有谁能帮我解决这个问题吗?

EN

回答 1

Stack Overflow用户

发布于 2020-07-16 14:33:22

你的“指示器”它是一个唯一的值,而不是一个数组。要获取所需的值,请使用

代码语言:javascript
运行
复制
this.chartform.value.indicators
//or
this.chartform.get('indicators').value

注意,您还可以使用ngModel来更改formControl目录(*)的值

代码语言:javascript
运行
复制
<select [ngModel]="chartform.get('indicators').value?chartform.get('indicators').value[0]:null"
            (ngModelChange)="chartform.get('indicators').setValue([$event])"
            [ngModelOptions]="{standalone:true}">

       <option  *ngFor="let indicator of metricindicators" [value]="indicator">
           {{indicator}}
       </option>
</select>

NOTE2:注意这是[value]="indicator",你忘记了[ ]

(*)可以,您可以在ReactiveForm中使用ngModel。此输入始终在“独立”中使用,也就是说,它独立于formGroup

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/62924813

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档