Question

我有一个5角形态，我正在努力将复选框映射到。

这是我的表单组件的html：

    <div class="form-group">
      <label>Title</label>
      <input type="text" name="title" class="form-control" minlength="2" required maxlength="30" autocomplete="off" id="title"
        #title="ngModel" [(ngModel)]="step1.title">
      <div *ngIf="title.invalid && f.submitted" class="text-danger">
        Promotion title is required and must be between 2 and 30 characters long.

      </div>
    </div>
    <div class="form-group">
      <label>Pick one or more categories for your promotion</label>
      <div class="form-check" *ngFor="let topic of topics">
        <input class="form-check-input" type="checkbox" value="" name="topicgroup" id="{{topic.name}}">
        <label class="form-check-label" for="defaultCheck1" style="font-weight: normal">
          {{topic.name}}
        </label>
      </div>
    </div>

我的组件中有2个模型，其中一个是表单所用的促销，另一个是主题。

我有一个网络服务，可以检索主题列表。

我想要的是，在提交表单时，将它们添加到促销模型中：

export class Promotion {
    title: string;
    topics: string[];
}

export class Topic {
    id: number;
    name: string;
}

目前，主题列表在我的表单中显示为一系列复选框 - 不确定如何获取提交的数据并将其保存到促销模型上的topic []数组中。

Answer 1

在输入元素中添加更改事件

 <div class="form-group">
  <label>Pick one or more categories for your promotion</label>
  <div class="form-check" *ngFor="let topic of topics">
    <input (change)="onChange(f)" #f  class="form-check-input" type="checkbox" [value]="topic" name="topicgroup" id="{{topic}}">
    <label class="form-check-label" for="defaultCheck1" style="font-weight: normal">
      {{topic}}
    </label>
  </div>
  <input type="submit" value="save">
</div>

检查此https://stackblitz.com/edit/angular-dx2gjf?file=app%2Fapp.component.html

将复选框映射到Angular 5

1 个答案: