将 FormGroup 映射到接口对象

Question

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

我一直在关注下面的教程，但我的 FormGroup 没有像教程那样自动转换到后端的界面。

• 反应式表单教程

我的代码如下：

---

成分

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，我让隐式映射发挥作用。您可以从视图传递 formGroup 的值，并隐式转换为组件端的接口。

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

网页

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

组件.ts

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

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