angular - 如何设置复杂 FormArray 反应形式的值

Question

我想将值设置为复杂的 FormArray 但 setValue 不起作用！

这是我的 component.ts ：

    coveragestypes : Array<ItemPolicyModel>=  [{'id':'1','name':'type1'}, {'id':'2','name':'type2'}];
    coveragesObject: any = null;
    policyForm = new FormGroup({

    policyNumber: new FormControl('', Validators.required),
    damageNumber: new FormControl('', Validators.required),
    coveragesObject: new FormArray([]),
    hiddenControl: new FormControl(''),
    policyConditions: new FormControl(''),
    includeVat: new FormControl('')
    })
    ngOnInit() {
         this.addCheckboxes();
        if(this.intake.policyInfo!=undefined){
          this.policyForm.get('policyNumber').setValue(this.intake.policyInfo.policyNumber);// work fine
          this.policyForm.get('damageNumber').setValue(this.intake.policyInfo.damageNumber);//work fine
          this.policyForm.get('coveragesObject').setValue(this.intake.policyInfo.coveragesObject);
       console.log("coveragesObject in the form", this.policyForm.get('coveragesObject').value)
    // it gives me [{'id':'1','name':'type1','coverageAmount':'22',checked:true}] but it is not setted in the HTML
       
 this.policyForm.get('policyConditions').setValue(this.intake.policyInfo.policyConditions);//work fine
         this.policyForm.get('includeVat').setValue(this.intake.policyInfo.includeVat);//work fine
      }

      }
    addCheckboxes() {
    let formGroups: FormGroup[] = this.coveragestypes.map(coverage => {
      return new FormGroup({
        id: new FormControl(coverage.id),
        name: new FormControl(coverage.name),
        CoverageAmount: new FormControl("", Validators.pattern(/^-?(0|[1-9]\d*)?$/)),
        checked: new FormControl(false)
      });
    });
    this.coveragesObject = new FormArray(formGroups);
    this.policyForm.setControl('coveragesObject', this.coveragesObject);
    }

我不知道为什么没有设置 FormArray！谁能帮我 ？

标签： angularangular-reactive-forms

Answer 1

您的代码工作正常，您只需要删除代码的以下部分

   this.policyForm
     .get("coveragesObject")
     .setValue(this.intake.policyInfo.coveragesObject);

基本上表格已经在addCheckboxes()函数中设置好了

看这个演示