预填充输入在`FormGroup`中的输入 – Angular2
发布时间:2020-12-17 17:42:58 所属栏目:安全 来源:网络整理
导读:我正在使用Angular2 – Reactive Forms.一切正常,直到我想在Form中的一个字段中显示预先填充的值. 场景:页面上有多个按钮,每个按钮打开一个带有字段的表单 姓名 电子邮件 消息 产品代码 – 此值应根据服务项目代码预先填充. Failing Scenario: Product Code
我正在使用Angular2 – Reactive Forms.一切正常,直到我想在Form中的一个字段中显示预先填充的值.
场景:页面上有多个按钮,每个按钮打开一个带有字段的表单 >姓名
TS代码: import { FormGroup,FormBuilder,Validators } from '@angular/forms'; queryForm: FormGroup; constructor(private _productService: ProductService,fb: FormBuilder) { this.queryForm = fb.group({ 'name': [null,Validators.compose([Validators.required,Validators.minLength(5)])],'email': [ null,[Validators.required,Validators.email] ],'message': [null,'pcode': [ null ],}) } HTML表格: <div *ngFor="let item of product"> <form action="#" [formGroup]="queryForm" (ngSubmit)="submitForm(queryForm.value)" method="post" novalidate="" class="text-left note" id="f_{{item.productId}}"> [ .... rest of the fields ...] <div class="form-group hidden"> <input type="hidden " class="form-control " id="pcode " name="pcode" formControlName="pcode" [value]="item.productCode" /> </div> <div class="form-group"> <button type="submit" class="btn1" [disabled]="!queryForm.valid">Submit</button> </div> </form> </div> 我怎样才能实现这一目标? 解决方法
更新:正如我们发现的那样,您需要一个formArray而不是一个formControl.因此,在构建表单时声明:
this.queryForm = this.fb.group({ arrayOfData: this.fb.array([]) // name a proper name to array }) 收到数据后,可以使用setValue或patchValue,迭代响应并将值修补到表单数组.在回调中调用patchValues方法(subscribe). patchValues() { const control = <FormArray>this.queryForm.controls.arrayOfData; this.items.forEach(x => { control.push(this.patchValue(x.first_name,x.pcode)) }) } patchValue(name,code) { return this.fb.group({ name: [name],pcode: [code] }) } 在你的模板中迭代formarray并记得设置formgroupname(这是索引): <div formArrayName="arrayOfData"> <div *ngFor="let code of queryForm.controls.arrayOfData.controls; let i = index"> <div formGroupName="{{i}}"> <label>Name: </label> <input formControlName="name" /><br> <label>Product Code: </label> <input formControlName="pcode" /><br> </div> </div> </div> Demo 原始答案: 您应始终在组件中设置表单值,而不是模板.当您从服务中收到值时,您可以使用patchValue或setValue …因此您可以在回调(订阅)内执行此操作: this.myService.getSomeData() .subscribe(data => { this.item = data; this.queryForm.patchValue({pcode: this.item.productCode}) }); 然后您不需要在表单中使用[value] =“item.productCode”,而是使用表单控件设置此值. Demo (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐
- 在Angular 2中调用环境(本机)特定的全局javascri
- Firebase回调和AngularJS
- 基于Koa2和superagent实现的英语四六级成绩查询系
- 如何使用带有angular2和firebase的nativescript
- Scala:Java,C#,Scala和C中的高级,开放式和通配符
- 安装nagios时出现version 1.21 does not match b
- 当模型更新时,我可以防止/延迟AngularJS $摘要的
- 在angularJS select指令中设置所选项目
- 动态调用WebService的两种方法(多线程)
- 检测adaljs-angular4中是否可以使用silentlogin
热点阅读