在“FormGroup"中预填充输入字段 - Angular2 [英] Pre Populate input field in `FormGroup` - Angular2

问题描述

我正在使用 Angular2 - 反应式表单.一切正常，直到我想在表单中的一个字段中显示预先填充的值.

场景:一个页面上有多个按钮，每个按钮打开一个表单，其中的字段为

1. 姓名
2. 电子邮件
3. 留言
4. 产品代码 --> 应根据服务中的项目代码预先填充此值.

<块引用>

失败场景:产品代码输入值变为空.

TS 代码:

import { FormGroup, FormBuilder, Validators } from '@angular/forms';查询表格:表格组；构造函数(私有_productService:ProductService，FB:FormBuilder){this.queryForm = fb.group({'name': [null, Validators.compose([Validators.required, Validators.minLength(5)])],'电子邮件': [null, [Validators.required, Validators.email]],'message': [null,Validators.compose([Validators.required, Validators.minLength(5)])],'密码':[空值],})}

HTML 表单:

<form action="#" [formGroup]="queryForm"(ngSubmit)="submitForm(queryForm.value)" method="post"novalidate="" class="text-left note" id="f_{{item.productId}}">[ .... 其他领域 ...]<div class="form-group hidden"><input type="hidden" class="form-control" id="pcode" name="pcode"formControlName="pcode" [value]="item.productCode"/>
<div class="form-group"><button type="submit" class="btn1" [disabled]="!queryForm.valid">提交</button>

</表单>

我怎样才能做到这一点?

解决方案

更新: 正如我们发现的，您需要一个 formArray 而不是单个 formControl.所以在构建表单时声明:

this.queryForm = this.fb.group({arrayOfData: this.fb.array([])//为数组命名一个合适的名称})

当您收到数据时，您可以使用 setValue 或 patchValue 来迭代响应并将值修补到表单数组中.在您的回调(订阅)中调用 patchValues-方法.

patchValues() {const control = <FormArray>this.queryForm.get('arrayOfData');this.items.forEach(x => {control.push(this.patchValue(x.first_name, x.pcode))})}补丁值(名称，代码){返回 this.fb.group({姓名:[姓名]，代码:[代码]})}

在您的模板中迭代 formarray 并记住设置 formgroupname(即索引):

<div *ngFor="let code of queryForm.get('arrayOFData').controls;让 i = 索引"><div [formGroupName]=i"><标签>名称:</label><input formControlName="name";/><br><label>产品代码:</label><input formControlName="pcode";/><br>

---

---

原答案:

您应该始终在组件中设置表单值，而不是在模板中.当您从服务收到值时，您可以使用 patchValue 或 setValue ......这样您就可以在回调(订阅)中执行此操作:

this.myService.getSomeData().订阅(数据=> {this.item = 数据；this.queryForm.patchValue({pcode: this.item.productCode})});

那么你就不需要在你的表单中使用[value]=item.productCode"，这个值是用表单控件设置的.

I am using Angular2 - Reactive Forms. Everything works fine until i want to show a pre-populated value in one of fields in Form.

Scenario: There are multiple buttons on a page and each button opens up a form with fields as

1. Name
2. Email
3. Message
4. Product Code --> Value for this shall be prepopulated as per item code from service.

Failing Scenario: Product Code input value turns to null.

TS Code:

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,Validators.compose([Validators.required, Validators.minLength(5)])],
        'pcode': [
            null
        ],
    })
}

HTML Form:

<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>

How can i achieve this?

解决方案

UPDATE: As we found out, you are needing a formArray instead of a single formControl. So declare that when you build form:

this.queryForm = this.fb.group({
  arrayOfData: this.fb.array([]) // name a proper name to array
})

You can use setValue or patchValue when you have received your data, where you iterate the response and patch the values to your form array. Call patchValues-method in your callback (subscribe).

patchValues() {
  const control = <FormArray>this.queryForm.get('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]
  })    
}

In your template iterate the formarray and also remember to set the formgroupname (which is the index):

<div formArrayName="arrayOfData">
  <div *ngFor="let code of queryForm.get('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>

---

---

Original answer:

You should always set the form values in the component, not the template. You can use patchValue or setValue, when you have received the value from the service... so you can do this e.g inside the callback (subscribe):

this.myService.getSomeData()
  .subscribe(data => {
     this.item = data;
     this.queryForm.patchValue({pcode: this.item.productCode})
  });

Then you do not need to use [value]="item.productCode" in your form, this value is set with the form control instead.

这篇关于在“FormGroup"中预填充输入字段 - Angular2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！