javascript - how to set value in form in Angular 4? - Stack Overflow

admin管理员组

文章数量:1278819

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 ponent

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 ponent.ts

on Edit ponent

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

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 ponent

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./edit/angular-pkf4wa?file=src%2Fapp%2Fedit%2Fedit.ponent.ts

on Edit ponent

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

• javascript
• angular
• ngrx
• ngrx-store

Share Improve this question Follow edited Nov 21, 2019 at 20:16 Nathaniel Flick 2,96322 gold badges2626 silver badges3333 bronze badges asked Jul 4, 2018 at 11:41 user944513user944513 12.7k5151 gold badges185185 silver badges348348 bronze badges 1

• downvoter please tell what is the wrong in this Question – user944513 Commented Jul 4, 2018 at 11:47

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

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.

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

use patchValue for this.

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

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

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

本文标签： javascripthow to set value in form in Angular 4Stack Overflow