Angular：反应式嵌套表单不更新答案

【问题标题】：Angular: Reactive nested form does not updateAngular：反应式嵌套表单不更新
【发布时间】：2018-01-25 13:28:46
【问题描述】：

我的嵌套响应式表单有问题：它不是响应式的。我有几个 ngfor，但是当控件更新时，浏览器中没有任何变化。所以首先是代码：

   <form [formgroup]="newRequest" >
        <div formarrayname="roundway">
          <div *ngfor="let item of newRequest.controls['roundway'] | arraypipe; let i=index">
            <div [formgroupname]="i" >
              <h4 *ngif="roundtrip">{{i===0 ? 'Aller' : 'Retour' }}</h4>
              ***mat-form-fields***
              <div formarrayname="viaOut" *ngif="viaOut">
                <div *ngfor="let item of newRequest.controls.roundway.controls[i].controls.viaOut | arraypipe; let j=index">
                  ***mat-form-fields***
                </div>
                <button mat-icon-button="" type="button" (click)="removeViaOut()" [disabled]="viaOut<2" fxflexalign="center">
                  <mat-icon matprefix="">remove</mat-icon>
                </button>
                <button mat-icon-button="" type="button" (click)="addViaOut()" [disabled]="viaOut>2" fxflexalign="center">
                  <mat-icon matprefix="">add</mat-icon>
                </button>
              </div>
              <!--Vols -->
              <div formarrayname="flights" fxlayout="row" fxlayoutalign="start center" fxlayoutwrap="">
                <div *ngfor="let item of newRequest.controls.roundway.controls[i].controls.flights | arraypipe; let k=index" fxlayout="row" fxlayoutgap="30px">
                  <div fxlayoutalign="start center" fxlayoutgap="30px" fxlayoutwrap="" [formgroupname]="k">
                    <h5 *ngif="viaOut>=1">Vol n°{{k+1}}</h5>

                    ***mat-form-fields***
                  </div>
                </div>
              </div>
            </form>

还有我的打字稿

    export class NouvelledemandeComponent implements OnInit {
  public newRequest: FormGroup;

  // Minimal date
  minDate = new Date();

  // Conditions for details display
  daterange = false;
  differentflights = false;
  details = false;
  viaIn = 0;
  viaOut = 0;
  roundtrip = false;

  // Form controllers
  classFC: FormControl = new FormControl();


  constructor(private _fb: FormBuilder) {}

  ngOnInit() {
    this.newRequest = this._fb.group({
      roundway: this._fb.array([
        this.initRoundway()
    ])
    });
  }

  initFlights() {
      return this._fb.group({
          class: ['', Validators.required],
          flightNb: [''],
          timeMin: [''],
          timeMax : ['']
      });
  }


  addFlight() {
    const control1 = <FormArray>this.newRequest.get('roundway.0.flights');
      control1.push(this.initFlights());
}

  removeFlight() {
    const control1 = <FormArray>this.newRequest.get('roundway.0.flights');
      control1.removeAt(control1.length - 1);
  }


  addViaOut() {
    const control1 = <FormArray>this.newRequest.get('roundway.0.viaOut');
    control1.push(new FormControl(null));
    this.viaOut++;
    this.addFlight();
  }

  removeViaOut(i: number) {
    const control1 = <FormArray>this.newRequest.get('roundway.0.viaOut');
    control1.removeAt(control1.length - 1);
    this.viaOut--;
    this.removeFlight();
  }

  addViaIn() {
    const control = <FormArray>this.newRequest.get('roundway.0.viaIn');
    control.push(new FormControl(null));
    this.viaIn++;
  }

  removeViaIn(i: number) {
    const control = <FormArray>this.newRequest.controls['viaIn'];
    control.removeAt(control.length - 1);
    this.viaIn--;
  }



initRoundway() {
      return this._fb.group({
        daterangeOutFrom: [],
        daterangeOutTo: [],
        viaOut: this._fb.array([]),
        viaIn: this._fb.array([]),
        flights: this._fb.array([
          this.initFlights()
      ])
      });
  }



}

所以我的问题是，每当触发 toggleVia 时，都会添加一个 via 和一个航班（我可以通过 console.log 看到我的航班数组和我的 viaout 数组已更新），但它不会出现在浏览器上。好像我的 ngfor 运行一次，当组件启动时，仅此而已；即使数组更新了，也没有任何反应。

感谢您的帮助

【问题讨论】：

这不是您问题的最小复制品，请将其精简为最小代码以重现您面临的问题:) stackoverflow.com/help/mcve
我试图减少它，但还不够；我减少了更多，请看一下:)
首先，angular指令区分大小写formgroup和formgroupname和ngif
initRoundway 方法在哪里？
@yurzui 是的，但在我看来，我的指令没问题。另外，我在打字稿的末尾添加了我的 initroundway 方法。对不起，我减少了我的代码太多了：/

标签： angular

【解决方案1】：

所以我终于找到了问题所在。我的 ngFor 是这样的：

<div *ngfor="let item of newRequest.controls['roundway'] | arraypipe; let i=index">

问题出在这里：应该是<div *ngfor="let item of newRequest.controls.roundway.controls; let i=index">

我的所有 ngFor 都有同样的问题，所以每当数组的控件发生更改时，它都不会更新视图，因为控件上没有设置 ngFor。此外，管道“打破”了这一切；以前是需要的，现在设置在controls上，明明是数组，就没用了。最后，路径写不正确。

【讨论】：