Pre Populate input field in `FormGroup` - Angular2

Question

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

Name
Email
Message
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?

Note that your question mentioned that you're using template driven forms - but FormGroup, FormBuilder etc are for reactive forms - meaning that the creation and management of your forms are driven from your component code, not your template - so which approach are you intending to use: template or reactive? — snorkpete
– snorkpete, Commented Apr 17, 2017 at 10:12
the question above might seem like it's irrelevant, but unless you know what you're doing, mixing the two approaches will just confuse you — snorkpete
– snorkpete, Commented Apr 17, 2017 at 10:15

AVJT82 · Accepted Answer · 2021-07-12 06:23:43Z

9

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.

edited Jul 12, 2021 at 6:23

answered Apr 17, 2017 at 9:48

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Gags Over a year ago

Where do i need to subscr\ibe this ?

AVJT82 Over a year ago

Well, this is just an example, you said you get your value from the service, so when you have received your value for item, then use patchValue to set the value you have gotten :)

Gags Over a year ago

Then this pcode will be mapped for every form that i have on the page?

AVJT82 Over a year ago

"every form I have on the page", not sure what you mean?? BTW, updated answer with a demo.

Gags Over a year ago

it means that service returns bunch of products and each corresponding to each product there are multiple forms. So each form shall hold value of pcode as returned from service for each product

|

Collectives™ on Stack Overflow

Pre Populate input field in `FormGroup` - Angular2

1 Answer 1

13 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related