时间戳

首页 > 解决方案 > FormArray 中的 FormGroup 包含显示 [object Object] 的对象

html - FormArray 中的 FormGroup 包含显示 [object Object] 的对象

问题描述

我正在为根据模型向 api 发送数据的编辑器制作原型。这是模型：

title: string,
desc: string,
pairs: [
  {
    left: { label: string },
    right: { label: string }
  },
  ...
]

这里的问题是我需要使用角度形式并且我找不到显示/使用 left.label 和 right.label 的方法。

目前，我的代码（如下所示）在打字稿中工作，因为它正在使用给定的值（根据模型的一些模拟数据）初始化表单。如果我在给定值后记录或打印我的 formGroup，它会完全按照应有的方式显示。

但我的主要问题在于我的组件的 html。尽管我的 formGroup 格式正确，但我似乎无法使用标签属性（当然，我想编辑它们）。

我认为这是因为当我在我的 formArray 中创建一对时，我只将左右属性设置为组中的 formControl。

这是我的component.ts：

export class LinksEditorComponent implements OnInit {
  @Input() exercise;
  exerciseForm: FormGroup;

  get pairs(): FormArray {
    return this.exerciseForm.get('pairs') as FormArray;
  }

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    if (!this.exercise.title || !this.exercise.desc || !this.exercise.pairs) {
      this.exercise = {
        title: '',
        desc: '',
        pairs: []
      };
    }
    this.initExerciseForm();
  }

  initExerciseForm() {
    this.exerciseForm = this.formBuilder.group({
      title: [this.exercise.title, Validators.required],
      desc: [this.exercise.desc, Validators.required],
      pairs: this.formBuilder.array(
        this.exercise.pairs.map(pair => this.createPair(pair)),
        Validators.required
      )
    });
  }

  createPair(pair: any): FormGroup {
    return this.formBuilder.group({
      left: [{ label: pair.left.label }, Validators.required],
      right: [{ label: pair.right.label }, Validators.required]
    });
  }

  onAddPair() {
    this.pairs.push(
      this.formBuilder.group({
        left: [{ label: '' }, Validators.required],
        right: [{ label: '' }, Validators.required]
      })
    );
  }
}

这是我的component.html：

<mat-card class="links-editor" *ngIf="exercise">
  <form
    fxLayout="column"
    fxLayoutAlign="space-between center"
    [formGroup]="exerciseForm"
    (ngSubmit)="onSubmit()"
    fxLayout="column"
  >
    <mat-form-field appearance="standard">
      <mat-label>Title</mat-label>
      <input matInput formControlName="title" />
    </mat-form-field>
    <mat-form-field appearance="standard">
      <mat-label>Description</mat-label>
      <input matInput formControlName="desc" />
    </mat-form-field>
    <mat-list formArrayName="pairs">
      <div *ngFor="let pairControl of pairs.controls; let i = index">
        <div [formGroupName]="i">
          <mat-form-field appearance="standard">
            <mat-label>Left chip</mat-label>
            <input matInput formControlName="left" />
          </mat-form-field>
          <mat-form-field appearance="standard">
            <mat-label>Right chip</mat-label>
            <input matInput formControlName="right" />
          </mat-form-field>
        </div>
      </div>
      <button type="button" mat-mini-fab color="accent" (click)="onAddPair()">
        <mat-icon>add</mat-icon>
      </button>
    </mat-list>
    <button type="submit" mat-fab color="accent" [disabled]="exerciseForm.invalid">
      <mat-icon>done</mat-icon>
    </button>
  </form>
</mat-card>

如果我尝试在 HTML 文件中进行设置<input formControlName="left.input">，我会在控制台中遇到错误，并且数据未显示。当然，如果我设置<input formControlName="left">了，我得到了... 左值：[Object object]。

标签： htmlangulartypescriptangular-forms

解决方案

好的，我找到了解决方案！我不明白我可以在 FormGroup 中创建一个 FormGroup。所以这是我的代码现在的样子，以防有人需要帮助：

component.ts配对创建

 createPair(pair: any): FormGroup {
    return this.formBuilder.group({
      left: this.formBuilder.group({ label: [pair.left.label, Validators.required] }),
      right: this.formBuilder.group({ label: [pair.right.label, Validators.required] })
    });
  }

  onAddPair() {
    this.pairs.push(
      this.formBuilder.group({
        left: this.formBuilder.group({ label: ['', Validators.required] }),
        right: this.formBuilder.group({ label: ['', Validators.required] })
      })
    );
  }

component.html展示

<mat-list formArrayName="pairs">
      <div *ngFor="let pairControl of pairs.controls; let i = index">
        <div [formGroupName]="i">
          <mat-form-field appearance="standard" formGroupName="left">
            <mat-label>Left chip</mat-label>
            <input matInput formControlName="label" />
          </mat-form-field>
          <mat-form-field appearance="standard" formGroupName="right">
            <mat-label>Right chip</mat-label>
            <input matInput formControlName="label" />
          </mat-form-field>
        </div>
      </div>
      <button type="button" mat-mini-fab color="accent" (click)="onAddPair()">
        <mat-icon>add</mat-icon>
      </button>
</mat-list>

推荐阅读