Javascript 角反应式阵列

我在访问位于

opticaorders

中的产品数组时遇到问题，该数组位于

orderForm

中。在控制台中，我看到为了访问products数组，我应该这样引用它：

orderForm.controls.opticianOrders.controls.products.controls

但它不起作用

这是我的组件：

  constructor(private customerService: CustomerService, private fb: FormBuilder) { }

  orderForm: FormGroup;

  ngOnInit() {
    this.orderForm = this.fb.group({
      name: [''],
      surName: [''],
      opticianOrders: this.fb.group({
        orderDescription: [''],
        products: this.fb.array([
          this.initProduct()
        ])
      }),
    });
  }

  save(model: Customer) {
    // call API to save customer
    console.log(model);
  }

  onCancel(form: NgForm){
    this.createState.emit(false);
  }

  initProduct(){
    return this.fb.group({
      name: [''],
      manufacturerName: ['']
    })
  }

  addProduct(){
    const control = <FormArray>this.orderForm.controls['products'];
    control.push(this.initProduct());
  }

  removeProduct(i: number){
    const control = <FormArray>this.orderForm.controls['products']
  }

构造函数（私有customerService:customerService，私有fb:FormBuilder）{}
orderForm:FormGroup；
恩戈尼尼特（）{
this.orderForm=this.fb.group({
姓名：['']，
姓氏：['']，
眼镜商订单：this.fb.group({
订单描述：['']，
产品：this.fb.array([
this.initProduct（）
])
}),
});
}
保存（型号：客户）{
//调用API以保存客户
console.log（模型）；
}
onCancel（表格：NgForm）{
this.createState.emit（false）；
}
initProduct（）{
返回此.fb.group({
姓名：['']，
制造商名称：['']
})
}
addProduct（）{
const control=this.orderForm.controls['products']；
control.push（this.initProduct（））；
}
移除产品（i:编号）{
const control=this.orderForm.controls['products']
}

Html

<form [formGroup]="orderForm" novalidate (ngSubmit)="save(orderForm)">

  <!-- name -->
  <div class="form-group">
      <label>Name</label>
      <input type="text" formControlName="name">
  </div>

  <!-- surName -->
  <div class="form-group">
      <label>Last Name</label>
      <input type="text" formControlName="surName">
  </div>

  <div formGroupName="opticianOrders" class="form-group">
      <label>Order Description</label>
      <input type="text" formControlName="orderDescription">
  </div>
  <div formArrayName="products">
          <div *ngFor="let product of orderForm.controls.opticianOrders.controls.products.controls; let i=index">
              <div>
                  <span>Address {{i + 1}}</span>
                  <span *ngIf="orderForm.controls.opticianOrders.controls.products.controls.length > 1" 
                      (click)="removeProduct(i)">
                  </span>
               </div>

               <div [formGroupName]="i">
                  <div>
                      <label>Product name</label>
                      <input type="text" formControlName="name">
                  </div>
              </div>
          </div>
        </div>
    <button type="submit" [disabled]="!orderForm.valid">Submit</button>
</form>

名称
姓
订单描述
地址{i+1}
产品名称
提交

试试这个

orderForm.controls.opticianOrders.controls

---

请按照下面的说明替换您的HTML代码

<form [formGroup]="orderForm" (ngSubmit)="save()">

  <!-- name -->
  <div class="form-group">
    <label>Name</label>
    <input type="text" formControlName="name">
  </div>

  <!-- surName -->
  <div class="form-group">
    <label>Last Name</label>
    <input type="text" formControlName="surName">
  </div>

  <div class="form-group">
    <label>Order Description</label>
    <input type="text" formControlName="orderDescription">
  </div>
  <div formArrayName="products">
    <div *ngFor="let product of orderForm.controls.products['controls']; let i=index">
      <div>
        <span><strong>Product {{i + 1}}</strong></span>
        <span class="fa fa-times" *ngIf="orderForm.controls['products'].controls.length > 1" (click)="removeProduct(i)">
        </span>
      </div>

      <div [formGroupName]="i">
        <div>
          <label>Product name</label>
          <input type="text" formControlName="name">
        </div>
        <div>
          <label>Product Manufacturer name</label>
          <input type="text" formControlName="manufacturerName">
        </div>
      </div>
    </div>

    <div class="margin-20">
      <a (click)="addProduct()" style="cursor: pointer; text-transform: uppercase; font-weight: 500">
        Add another Entry +
      </a>
    </div>
  </div>
  <button class="btn btn-primary" type="submit" [disabled]="orderForm.invalid">Submit</button>
</form>

名称
姓
订单描述
乘积{{i+1}
产品名称
产品制造商名称
添加另一个条目+
提交

请按照以下内容替换TS代码。我在save form方法中使用了一个技巧，请检查它是否适用于您

  constructor(private fb: FormBuilder) { }

  orderForm: FormGroup;

  ngOnInit() {
    this.orderForm = this.fb.group({
      name: ['', Validators.required],
      surName: ['', Validators.required],
      orderDescription: ['', Validators.required],
      products: this.fb.array([
        this.initProduct()
      ])
    });
  }

  save() {
    console.log(this.orderForm.value);
    const obj = {
      name: this.orderForm.value.name,
      surName: this.orderForm.value.surName,
      orderDescription: this.orderForm.value.orderDescription,
      opticianOrders: {
        products: this.orderForm.value.products
      },
    };

    console.log(obj);
  }

  initProduct() {
    return this.fb.group({
      name: ['', Validators.required],
      manufacturerName: ['', Validators.required]
    })
  }

  addProduct() {
    const control = <FormArray>this.orderForm.controls['products'];
    control.push(this.initProduct());
  }

  removeProduct(i: number) {
    const control = <FormArray>this.orderForm.controls['products'];
    control.removeAt(i);
  }

构造函数（私有fb:FormBuilder）{}
orderForm:FormGroup；
恩戈尼尼特（）{
this.orderForm=this.fb.group({
名称：[''，验证器。必需]，
姓氏：[''，验证器。必填]，
orderDescription:[''，验证器。必需]，
产品：this.fb.array([
this.initProduct（）
])
});
}
保存（）{
log（this.orderForm.value）；
常量对象={
名称：this.orderForm.value.name，
姓氏：this.orderForm.value.姓氏，
orderDescription:this.orderForm.value.orderDescription，
眼镜商订单：{
产品：this.orderForm.value.products
},
};
控制台日志（obj）；
}
initProduct（）{
返回此.fb.group({
名称：[''，验证器。必需]，
制造商名称：[''，验证器。必填]
})
}
addProduct（）{
const control=this.orderForm.controls['products']；
control.push（this.initProduct（））；
}
移除产品（i:编号）{
const control=this.orderForm.controls['products']；
控制。移除（i）；
}

您的代码不起作用。您没有导入

ReactiveFormsModule

，您在

hello.component.ts

中实现了表单代码，还将模板代码放入了

app.component.html

看我的。它允许您从

FormArray

中添加（单击添加）和删除（单击“x”）产品

removeProduct(i: number){
  const aFormGroup = this.orderForm.controls.opticianOrders as FormGroup;
  const aFormArray = aFormGroup.controls.products as FormArray;
  aFormArray.removeAt(i);    
}

使用两种产品形成价值：

{
  name: 'John',
  surName: 'Doe',
  opticianOrders: {
    orderDescription: '1234',
    products: [
      { name: 'Cookies', manufacturerName: '' },
      { name: 'More Cookies', manufacturerName: '' }
    ]
  }
}

对于typescript

this.orderForm.controls.opticianOrders

是一个

抽象控件

，它没有

控件

属性。您必须首先将其强制转换为

FormGroup

。与

产品

相同，您必须将其强制转换为

格式阵列

removeProduct(i: number){
  const aFormGroup = this.orderForm.controls.opticianOrders as FormGroup;
  const aFormArray = aFormGroup.controls.products as FormArray;
  aFormArray.removeAt(i);    
}

---

嗨，约瑟夫！它不起作用。我还更新了代码：它是orderForm.controls.opticianOrders.controls.products.controls，而不是orderForm.controls.ordersDescription.controlstyped@flyingpig. 你能在stackblitz中复制吗？嗨@Joseph这是stackblitz的链接。我不明白，什么是眼镜商订单？？为什么你要在fb集团内部再次创建fb goup？请在此提及，你最终想要什么样的对象？？？@Raj Optician Orders是错的，我不小心写了它。Fb组中的Fb组，因为我需要以下结果：{name:''，opticianOrder:{products[{name:}]}}我想您已经在自己的项目中导入了ReactiveFormsModule？因为在你的Stackblitz中它丢失了。请检查下面的答案…它可能会起作用？？非常感谢，我刚刚开始使用angular。