Trung tâm cá nhân
sách gpt4 ai đã đi

javascript - Angular 2 : Can't add form group to form array in reactive Forms

In lại Tác giả: Data Little Sun 更新时间：2023-10-29 04:25:30 27 4
mua khóa gpt4 Nike

我正在构建动态表单并希望“即时”添加表单组。

这是我的代码，几乎可以工作:

import {Component, OnInit} from '@angular/core';
import {FormGroup, FormBuilder, FormArray, Validators, FormControl} from "@angular/forms";

export class CombinedComponent implements OnInit {

    ltsForm: FormGroup;

    constructor(private formBuilder: FormBuilder) {
    }

    ngOnInit() {
        this.ltsForm = this.initFormGroup();

        // init products
        for (let i = 0; i < 3; i++) { // add dynamically products
            this.addProduct();
        }
        
        console.log(this.ltsForm); // Array 'prods' is empty
    }

    // initialize form group, but don't add products yet because they will be added dynamically later
    initFormGroup() {
        let group = this.formBuilder.group({
            products: this.initProductGroup()
        });

        return group;
    }

    initProductGroup() {
        let group = this.formBuilder.group(
            {
                //initialize empty formbuilder array
                prods: this.formBuilder.array([])
            }
        );

        return group;
    }

    initProducts() {
        return this.formBuilder.group({
            id: [''],
            value: false, // checkbox value
        });
    }

    addProduct() {
        this.ltsForm.controls['products'].value.prods.push(this.initProducts());

        console.log(this.ltsForm); // Array 'prods' contains 3 FormGroup elements
    }
}

模板:


      novalidate
      (ngSubmit)="save(ltsForm)">

    

        


            

                

                    
                           formControlName="value"
                           id="product_{{ i }}"
                           name="product_{{ i }}">
                

            


        

    


    
            [disabled]="!ltsForm.valid">
        Submit

在方法 addProduct() 中，我将整个 FormGroup 元素推送到“prods”数组。所以最后 ngOnInit() 中控制台的输出只包含一个空的“prods”数组，而 addProduct() 方法中控制台输出的数组有 3 个元素。看起来 this.ltsForm 丢失了它的引用并且没有更新。有什么想法吗？

UPD:刚发现如果我从模板中删除全部内容，我会得到充满数据的“产品”。

1 Câu trả lời

有很多小错误和复杂性，所以我削减了你的例子并重新构建它。 Angular 团队有一个 nested form array 的例子和 nested form group那很有帮助。这是过程(和 plnkr ):

  1. 有一个简单的小组工作:{ projects: '' }.

  2. 得到了一个具有一组控件的工作:{ projects: ['a', 'b', 'c'] }。我跳过了 prods，这似乎是不必要的。


      

        

          <đầu vào="" [formcontrolname]="i">
        

      

      


    ...

    export class CombinedComponent implements OnInit {

      ltsForm: FormGroup;

      lấy sản phẩm() { trả về this.ltsForm.get('sản phẩm'); }

      constructor(private formBuilder: FormBuilder) {}

      ngOnInit() {
          this.ltsForm = this.formBuilder.group({
            sản phẩm: this.formBuilder.array([])
          });

          đối với (cho i = 0; i < 3; ++i) {
            this.addProduct();
          }
      }

      addProduct() {
        sản phẩm này.push(điều khiển formBuilder(''));
      }

      cứu() {
        console.log(this.ltsForm.value);
      }
    }

  3. Bước cuối cùng là thay thế nhómMảngKiểm soát trong:

    @Thành phần({
      bộ chọn: 'thành phần kết hợp',
      mẫu: `
        

          

            

              

                
                
              

            

          

          

      `
    })
    export class CombinedComponent implements OnInit {

      ltsForm: FormGroup;

      lấy sản phẩm() { trả về this.ltsForm.get('sản phẩm'); }

      constructor(private formBuilder: FormBuilder) {}

      ngOnInit() {
          this.ltsForm = this.formBuilder.group({
            sản phẩm: this.formBuilder.array([])
          });

          đối với (cho i = 0; i < 3; ++i) {
            this.addProduct();
          }
      }

      addProduct() {
        sản phẩm này.push(this.formBuilder.group({
          nhận dạng: '',
          giá trị: sai
        }));
      }

      cứu() {
        console.log(this.ltsForm.value);
      }
    }

Liên quan đến javascript - Angular 2: Không thể thêm nhóm biểu mẫu vào mảng biểu mẫu trong Biểu mẫu phản ứng, chúng tôi đã tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/41517389/

27 4 0
Bài viết được đề xuất: Làm thế nào để gửi dữ liệu biểu mẫu trong yêu cầu đăng http trong Angular 2?
Bài viết được đề xuất: Làm thế nào để tạo liên kết cứng trong C#?
Bài viết được đề xuất: Lấy các mục riêng biệt từ danh sách - Stack Overflow
Bài viết được đề xuất: VSCode chia các giá trị được phân tách bằng dấu phẩy thành các dòng
Dữ liệu Little Sun
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com