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

【问题标题】：How to patch values in reactive form array in Angular, while editing input?如何在编辑输入时修补Angular中反应形式数组中的值？
【发布时间】：2019-11-03 04:16:48
【问题描述】：

在编辑来自 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);
      }
    }));`

【问题讨论】：

标签： angular7 angular-reactive-forms formarray

【解决方案1】：

我已经通过patchModelValue 方法在我的应用程序中修补了formArray 值，这可以通过@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

【讨论】：