时间戳

首页 > 解决方案 > 如何在编辑输入时修补Angular中反应形式数组中的值？

angular7 - 如何在编辑输入时修补Angular中反应形式数组中的值？

问题描述

如何在编辑来自 DB 的输入值时修补 formArray 中多个输入的值？通过 实现动态输入。

--这是我的formGroup和formArray--

 `  this.accountsForm = new FormGroup({
      'type_name': new FormControl('', Validators.required),
      'state': new FormControl(true, Validators.required),
      'masks': this.MaskArray,
    }); `

--这是FormArray--

`onInit() {
    this.MaskArray = new FormArray([]);
    this.MaskArray.push(
      new FormGroup({
        mask: new FormControl()
      })
    );
`

---这个动态输入创建

`createItem() {
    (<FormArray>this.accountsForm.get('masks')).push(
      new FormGroup({
        mask: new FormControl()
      })
    );
  }
`

---这里出现了问题。我试图从 DB 中获取值并传递给输入，它仅适用于来自 data.rows 的数组中具有一个值的输入。如何将 data.row 中的多个值传递给 formArray 的掩码控制器——

`this.subs.add(this.sql.query(`Select t.Mask From Mid_s_Account_Type_Masks t Where Type_Id=${this.type_id} `).subscribe(data => {
      this.maskObj = data.rows;
      console.log(this.maskObj);
      for(var i = 0; i < this.maskObj.length ; i++){
        var j = 0;
        for(let row of this.maskObj){
          (<FormArray>this.accountsForm.controls['masks']).at(j).patchValue({
            mask: row.mask,
          });
          j++;
          console.log(row.mask);
        }
        console.log(j);
      }
    }));`

标签： angular7angular-reactive-formsformarray

解决方案

我已经通过方法在我的应用程序中修补了 formArray 值patchModelValue，这可以在 package.json 的帮助下@rxweb/reactive-form-validators实现。

patchModelValue 将根据提供的服务器 JSON 对象或模型对象更新 FormGroup 内的 FormControl 的值。对于这些，您需要RxFormBuilder在组件中导入

    export class AccountComponent implements OnInit {
    accountsForm : RxFormGroup

    constructor(
        private formBuilder: RxFormBuilder    ) { }

    ngOnInit() {
      this.accountsForm  = <RxFormGroup>this.formBuilder.group({
          masks:[
          {
            mask:''
          }]
        });
    }
 getFormArray(){
      let formarray = this.accountsForm .controls.masks as FormArray;
      return formarray.controls;
    }
    patchvalue()
    {
          this.accountsForm.patchModelValue( {
                masks: [{ mask: "xyz" }] });
    }
}

请参考这个例子：stackblitz

推荐阅读