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

时间:2019-08-09 07:59:05

标签: html angular typescript angular-forms

我正在为一个编辑器设计原型,该编辑器根据模型向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">,我将得到...左边的值:[对象对象]。

2 个答案:

答案 0 :(得分:0)

object object表示您具有要加载到球型摄像机中的js对象。将其放在与输入相同标签内的html

<p>{{left | json}}</p>

然后您应该看到左侧对象的所有可用属性,然后相应地在formcontrolName中设置

答案 1 :(得分:0)

好的,我找到了解决方案!我不明白我只能在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>