CODEWITHSUNDEEP
javascriptangularngrxngrx-store
user944513
user944513

Reputation: 12729

how to set value in form in Angular 4?

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'])
}

Upvotes: 0

Views: 8232

Answers (5)

Salike Hassan
Salike Hassan

Reputation: 101

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.

Upvotes: 6

Krishna Rathore
Krishna Rathore

Reputation: 9687

use patchValue for this.

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

Upvotes: 1

Ankit Sharma
Ankit Sharma

Reputation: 1704

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,
    });

Upvotes: 0

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41447

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

Upvotes: 4

Ali
Ali

Reputation: 2591

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

Upvotes: 0

Related Questions