如何在 Angular 中用反应形式内的值初始化数组

Question

我有这个表单，它有一个名为“channel”的数组。每次我单击一个按钮时，都会调用 addChanels()，并在我的数组中添加新组。当我创建一个新注册表时它正在工作。但是当我需要编辑这个注册表时，我需要我的表单数组已经有值。

aplicativo = this.activatedRoute.snapshot.data['aplicativo'];

ngOnInit(): void {

    this.form = this._formBuilder?.group({
      id: [this.aplicativo.id],
      name: [this.aplicativo.name, Validators.required],
      version: [this.aplicativo.version, Validators.required],
      appId: [this.aplicativo.appId, Validators.required],
      channel: this._formBuilder?.array([this.aplicativo.channel]),
    });
  }

  get channel() {
    return this.form?.controls['channel'] as FormArray;
  }

  addChanels() {
    const channelArray = this._formBuilder?.group({
      canais: [],
      topicos: [],
    });

      this.channel.push(channelArray);
  }

但是 angular returns 我的错误

Cannot find control with path: 'channel -> 0 -> canais'

*html

<button type="button" mat-raised-button color="primary" (click)="addChanels()">Adicionar</button>

          <ng-container formArrayName="channel">
            <ng-container *ngFor="let chan of channel.controls; let i = index">

              <mat-card [formGroupName]="i" class="content flex_content">
                <button type="button" mat-icon-button color="primary" class="close">
                  <mat-icon class="red" (click)="deleteChannels(i)">cancel</mat-icon>
                </button>

                <div class="row">

                  <div class="col">
                    <mat-form-field appearance="outline">
                      <mat-label>Canais</mat-label>
                      <input matInput formControlName="canais" />
                    </mat-form-field>
                  </div>

                  <div class="col">
                    <mat-form-field appearance="outline">
                      <mat-label>Tópicos</mat-label>
                      <input matInput formControlName="topicos" />
                    </mat-form-field>
                  </div>
                </div>
              </mat-card>
            </ng-container>
          </ng-container>

解析器：

 resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (route.params && route.params['id']) {
      return this.aplicativosService.togetAplicativoById(route.params['id']);
    }

    return of({});
  }

路由：

 {
    path: 'configurar-aplicativo',
    component: ConfiguracaoAplicativoComponent,
    resolve: {
      aplicativo: AplicativoResolverGuard,
    },
  },
  {
    path: 'editar-aplicativo/:id',
    component: ConfiguracaoAplicativoComponent,
    resolve: {
      aplicativo: AplicativoResolverGuard,
    },
  },

Answer 1

我建议你打开严格模式，或者其他东西，这样 typescript 就可以在 IDE 中告诉你你实际上做错了什么。

这样做会出错：

channel: this._formBuilder?.array([this.aplicativo.channel]),

行中的内容：

this.aplicativo.channel is missing the following properties from AbstractControl....

所以您实际需要做的是将表单组推入数组（AbstractControl 是基础 class，因此是错误），您不能只放入一个“常规”数组。所以我建议如下：

form!: FormGroup;

constructor(private _formBuilder: FormBuilder) { }

ngOnInit() {
  this.form = this._formBuilder.group({
    channel: this._formBuilder.array([])
  });
  this.build();
}

// add form controls
build() {
 // DON'T use "any", type your data, being lazy just for the sake of the demo...
 this.aplicativo?.channel.map((x: any) => {
   (this.form.get('channel') as FormArray).push(this._formBuilder.group({
     topicos: [x.topicos],
     canais: [x.canais]
   }))
 })
}

现在您正在将表单组插入到表单数组中！

如何在 Angular 中用反应形式内的值初始化数组

How to inicialize an array with values inside reactive form in Angular

angular

angular-reactive-forms

formarray