how to set value in form in Angular 4?

Question

I have data I want to populate in a form. I am using reactive form in Angular 6.

Demo Application

I have list of items in which there is edit button .On click of edit button I am showing edit component

I want to populate or set all values in input field. I have data in an obj now I want to populate that in form

here is my code https://stackblitz.com/edit/angular-pkf4wa?file=src%2Fapp%2Fedit%2Fedit.component.ts

on Edit component

ngOnInit() {
  this.product$ = this.store.pipe(select(fromProduct.getSelectedProduct))
  //       .subscribe((res)=>{
  //    console.log('ssssss');
  // console.log(res)
  //       },()=>{
  //         console.log('dddd')
  //       })
}

Edit button click

editProduct(product: Product, item) {
  const editProduct: EditProductInterface = {
    product: product,
    selectedIndex: item
  }
  this.store.dispatch(new productActions.EditProduct(editProduct));
  this.router.navigate(['edit'])
}

Answer 1

In angular, there are two methods, setValue and patchValue using these two methods you can set value in your form's controls. When you have the requirement to fill all the form control with data then use setValue method and when you have the requirement to fill only specific form control with data then use patchValue method. Below is the code example I hope this will help you.

userForm:FormGroup;

**//Use below code example when you need to fill data in all the controls of form.

this.userForm.setValue({
    firstName:'test first name',
    lastName:'test last name',
    email:'[email protected]'
});

**//Use below code example when you need to fill data only in the specific form control

this.userForm.patchValue({
    firstName:'test first name',
    lastName:'test last name'
});

In the above two methods, I have used firstName, lastName and email property, these property name needs to be same as of your formControlName name given in HTML markup.

Official documentation of setValue and patchValue method are available here.

Answer 2

use the patchValue to set the formControlValue

   this.store.pipe(select(fromProduct.getSelectedProduct))
        .subscribe((res)=>{
          console.log('ssss'+res.productName)
          this.productForm.patchValue({
            productName: res.productName, 
            starRating: res.starRating, 
            productCode: res.productCode, 
            description: res.description, 
            id: res.id
          });
        },()=>{
          console.log('dddd')
        })

Demo

Answer 3

use patchValue for this.

this.store.pipe(select(fromProduct.getSelectedProduct)).subscribe((res) => {
    this.productForm.patchValue(res);
})

Answer 4

you can do like this:

<input type="text" name="name" [(ngModel)]="product.name"
                required ngModel #name="ngModel">

or this:

<input type="text" name="name" value="{{product.name}}"
                required ngModel #name="ngModel">

Answer 5

Use patchValue if in case you need to update only certain fields. If you plan to update all fields, you may also use setValue as suggested below.

    this.productForm.patchValue({
      productName: res.productName,
      id: res.id
    });

    this.productForm.setValue({
      productName: res.productName,
      id: res.id,
      starRating: res.starRating,
      productCode: res.productCode,
      description: res.description,
    });