как установить значение в форме в угловых 4?

Question

У меня есть данные, я хочу заполнить их в форме. Я использую реактивную форму в угловых 6.

Демонстрационное приложение

У меня есть список предметов, в которых есть кнопка edit. При нажатии кнопки edit я показываю edit component

Я хочу заполнить или установить все значения в поле ввода. У меня есть данные в объекте, теперь я хочу заполнить их в форме

вот мой код https://stackblitz.com/edit/angular-pkf4wa?file=src%2Fapp%2Fedit%2Fedit.component.ts

при редактировании компонента

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

  }

Редактировать нажатие кнопки

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

Answer 1

используйте patchValue для этого.

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

Answer 2

В angular есть два метода: setValue и patchValue . Используя эти два метода, вы можете установить значение в элементах управления вашей формы. Если у вас есть требование заполнить все элементы управления формы данными, используйте метод setValue , а когда вам нужно заполнить данные только для определенного элемента управления формы, используйте метод patchValue . Ниже приведен пример кода, надеюсь, это поможет вам.

UserForm: FormGroup;

** // Используйте приведенный ниже пример кода, когда вам нужно заполнить данные во всех элементах управления формы.

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

** // Используйте приведенный ниже пример кода, когда вам нужно заполнить данные только в специальном элементе управления формы

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

В вышеупомянутых двух методах я использовал свойства firstName, lastName и email, имя этого свойства должно совпадать с именем вашего formControlName , заданного в разметке HTML.

Официальная документация по методам setValue и patchValue доступна здесь .

Answer 3

используйте patchValue для установки 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')
        })

Демо

Answer 4

Используйте patchValue, если вам нужно обновить только определенные поля. Если вы планируете обновить все поля, вы также можете использовать setValue, как указано ниже.

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

Answer 5

вы можете сделать так:

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

или это:

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