具有 formGroup 和 formarray 的反应形式

Question

我有一个从给定数组动态生成的简单表单。

ts 文件 ->

'''

numberofdiscs = {
    disc1: ['track1', 'track2'],
    disc2: ['track1'],
    };

arraydiscs=['disc1','disc2]

'''

我创建了这样的表单组结构：-->

'''

addcontrols() {
    for (let i in this.numberofdiscs) {
      this.form.addControl(i, this.fb.array([]));
    }
  }

  addtracks() {
    for (let i in this.numberofdiscs) {
      for (let a of this.numberofdiscs[i]) {
        (<FormArray>this.form.get(i)).controls.push(this.trackInfoGroup());
      }
    }
  }

 trackInfoGroup(): FormGroup {
    return this.fb.group({
      code: this.fb.group({ isrc: [''], label: [''] }),
      artists: this.fb.group({ name: [''], namekana: [''], nameenglish: [''] }),
      titles: this.fb.group({ song: [''], songkana: [''], songenglish: [''] }),
      playtime: this.fb.group({ duration: [''], starttime: [''] }),
      options: this.fb.group({ medley: [''], tieup: [''], bonus: [''] }),
    });
  }

'''

表单在呈现时没有显示错误，但我无法获取输入值 html -->

'''

<ng-container *ngFor="let disc of arraydiscs; let i=index;">
    <div formArrayName="{{disc}}">
        <div *ngFor="let track of this.form.get(disc).controls; let i=index;">
            <div formGroupName="{{i}}">
                <span>Track Number : {{i}}</span>
                <span>Code :
                    <ng-container formGroupName="code">
                        <span><input type="text" formControlName="isrc"></span>
                        <span><input type="text" formControlName="label"></span>

                    </ng-container>
                </span>
                <span>Artists :
                    <ng-container formGroupName="artists">
                        <span><input type="text" formControlName="name"></span>
                        <span><input type="text" formControlName="namekana"></span>
                        <span><input type="text" formControlName="nameenglish"></span>

                    </ng-container>
                </span>
                <span>Titles :
                    <ng-container formGroupName="titles">
                        <span><input type="text" formControlName="song"></span>
                        <span><input type="text" formControlName="songkana"></span>
                        <span><input type="text" formControlName="songenglish"></span>

                    </ng-container>
                </span>
                <span>Play Time :
                    <ng-container formGroupName="playtime">
                        <span><input type="text" formControlName="duration"></span>
                        <span><input type="text" formControlName="starttime"></span>

                    </ng-container>
                </span>
                <span>Titles :
                    <ng-container formGroupName="options">
                        <span><input type="text" formControlName="medley"></span>
                        <span><input type="text" formControlName="tieup"></span>
                        <span><input type="text" formControlName="bonus"></span>

                    </ng-container>
                </span>
            </div>
        </div>
    </div>
</ng-container>
<button type="submit" class="btn btn-primary">Save</button>

''' 到目前为止的问题是我无法在提交时控制表单值。谢谢...

Answer 1

尝试使用 (this.form.controls[i]) 或 this.form.get(i) 而不是 (this.form.get(i)).adddTracks

函数中的控件

具有 formGroup 和 formarray 的反应形式

reactive forms with formGroup and formarray

angular

angular-reactive-forms