Question

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

-这是我的带有formArray的formGroup-

 `  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()
      })
    );
  }
`

---此处出现问题。我试图从数据库获取值并传递给输入，它仅适用于数组中一个值来自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);
      }
    }));`

Answer 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

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

1 个答案: