将 FormGroup 映射到接口对象

Question

我一直在尝试将我的 Angular HTML 模板中的表单数据绑定到我的组件中的接口。

我一直在学习下面的教程，但是我的 FormGroup 并没有像教程那样自动投射到后端的界面。

• Reactive Forms Tutorial

我的代码如下：

---

组件

import { Component, OnInit } from "@angular/core";
import { FormGroup, FormBuilder, FormArray, FormControl, Validators } from "@angular/forms";
import { DeckBuildRequest } from "../domain-models/interfaces/deckBuildRequest.interface";

@Component({
  selector: "deck-options",
  templateUrl: "./deck-options.component.html",
  styleUrls: ["./deck-options.component.css"]
})
export class DeckOptionsComponent {
  private deckBuildRequest: FormGroup;

  constructor(formBuilder: FormBuilder) {
    this.deckBuildRequest = formBuilder.group({
      "deckSize": 60,
      "deckColors": formBuilder.array([
          {color: "Blue", checked: false},
          {color: "Green", checked: false},
          {color: "Red", checked: false},
          {color: "White", checked: false},
          {color: "Black", checked: false},
          {color: "Colorless", checked: false}
        ])
    });
  }

  GenerateDeck(request: DeckBuildRequest) {
    alert(request.deckSize);
  }

}

HTML

<div id="deck-options">
      <form [formGroup]="deckBuildRequest"
            (ngSubmit)="GenerateDeck(deckBuildRequest)">
        <span>
          <label><input formControlName="deckSize" type="number" max="100" min="1">Number of Cards</label>
        </span>
        <div>
          <label [attr.for]="'color'+i"
            *ngFor="let colorOption of deckBuildRequest.controls['deckColors'].controls, let i = index"
          >
            <input 
                  type="checkbox"
                  id="color{{i}}"
                  value="{{colorOption.value.color}}"
                  ng-checked="colorOption.value.checked"
            />
            {{colorOption.value.color}}
          </label>
        </div>

        <button type="submit">Generate Deck!</button>
      </form>
    </div>

界面

export interface DeckBuildRequest {
    deckSize: number;
    deckColors: [{
        color: string;
        checked: boolean;
    }];
}

---

我在这里错过了什么？

Answer 1

FWIW，我得到了隐式映射的工作。您可以从 View 传递 formGroup 的值，并隐式转换为 Component 端的接口。

通过调用“.getRawValue()”或“.value”将FormGroup结构值传递给期望接口作为隐式转换参数的组件。

HTML

<form (ngSubmit)="submit(Form.value)"> ... </form>

组件.ts

submit(instance: ObjectClass){
 console.log(instance); // just to check if it worked 
}

“.getRawValue()”和“.value”之间的一个重要区别是 getRawValue 从禁用的控件返回值，而 value 只从启用的控件返回值。

Answer 2

(ngSubmit)="GenerateDeck(deckBuildRequest.getRawValue())"

在表单 html 上替换它。这对我有用。