角反应性表单-表单数组-如何使用传播运算符设置FormArray?

jmiles540

我有一个formarray。如果我使用formbuilder对其进行初始化并将其推入,它似乎可以正常工作。如果我要从中推送项目的数组相同,并尝试使用价差运算符一次将其全部添加,则会收到错误消息“错误错误:找不到路径为'sizesArray-> 0'的控件”

我的问题是,按照ngrx / rsjx / functional-active编程的精神,我如何才能使Formarray保持“不可变”并从FormGroup []分配给它,而不是清除,循环和推送?

以下是相关代码:

sizesArray: FormArray;
sizesArray2: FormArray;
sizes: Observable<SizeModel[]>;

constructor(
    private productStore: Store<productState.State>,
    private fb: FormBuilder
  ) {
    this.sizes = productStore.select(productState.selectSizes);
  }

ngOnInit() {


    this.sizesArray = this.fb.array([]);
    this.sizesArray2 = this.fb.array([]);

    this.sizes
      .pipe(
        skipWhile(sizes => !sizes),
        map(sizes => {
         return sizes.map(size => this.fb.group({size}));
        }
       )
      )
      .subscribe(
        sizes => {
          // this is the code I want to use.  that throws the error
          this.sizesArray = this.fb.array([...sizes]);

          // this code works, but I don't know how it's different than the code above
          this.sizesArray2.clear();
          sizes.forEach( size => {
            this.sizesArray2.push(size);
          });

        }
      );

    this.sizeForm = this.fb.group({
      sizesArray: this.sizesArray
    });

  }

和我的模板:

...
<form [formGroup]="sizeForm">
      <fieldset  id="size-container">
        <legend>Sizes</legend>
        <div formArrayName="sizesArray" >
            <div *ngFor="let size of sizesArray.controls; let i = index;" [formGroupName]="i">
            <app-size-form
              formControlName="size"
              (deleteClicked)="deleteSize(i);">
            </app-size-form>
          </div>
        </div>
      </fieldset>
      <button (click)="addSize()" id="size-button">Add Size</button>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="submit()">Save</button>
    </form>
...

谢谢!

安德烈·盖特伊(AndreiGătej)

我认为问题是,你改变引用

this.sizeForm = this.fb.group({
  sizesArray: this.sizesArray
});

此时指向sizeArray所引用的值this.sizesArray,即this.fb.array([])然后,在订户的下一个回调中,您正在更改引用。此值也由捕获formControlName='sizesArray',表示

<div *ngFor="let size of sizesArray.controls; let i = index;" [formGroupName]="i">

将创建多个FormGroup实例,这些实例是容器的子代,该容器sizesArray为空。

现在,this.sizesArray(您要在模板中对其进行迭代)指向其他内容,即:this.fb.array([...sizes])

因此,基本上发生的是sizesArray(的孩子sizeForm)指向一个空值,FormArray并且this.sizesArray指向一个非空值 FormArray

在这种情况下,您可以做的是:

.subscribe(sizes => {
  this.sizeForm.setControl('sizeArray', this.fb.array(sizes))
})

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

带有嵌套表单数组的角反应表单

发布表单数组失败

角度2-无法设置表单数组值

在反应形式中设置和更新表单数组上的验证

在表单数组中禁用反应性表单选择表单控件

使用类进行表单数组验证

Angular5反应性表单:另一个表单数组中的表单数组

如何在FormArray(反应性表单)中使用mat-autocomplete(角材料自动完成)

角反应式表单值未在表单数组推送上更新

使用嵌套表单数组获取“路径错误”

如何在嵌套表单数组中全选并取消全选?

在角度8的表单数组中设置值

Angular反应表单-如何在表单数组的表单控件内向单个控件添加订阅valueChanges

反应:使用传播运算符使用表单数据onChange更新状态

反应性表单:表单构建器,在表单模型中动态设置数组大小

带单选按钮的反应性表单数组

Angular如何修补表单数组中的值

如何在表单数组中使用多个formgroup

如何在HTML中访问Angular的表单数组?

使用php将多个HTML表单数组插入mysqli

对PHP表单数组使用HTML字段集

innerHtml表单数组

jQuery验证使用索引验证表单数组

使用Vuejs和Laravel 5的多维表单数组

如何使用嵌套表单数组将服务器响应映射到角度反应表单

如何修复未正确提交的数组中的表单数据

无法使用 searchParams 复制表单数组

如何在表格中以角度填充嵌套表单数组?

如何使用角度表中的嵌套表单数组以反应形式执行验证?