Question

我为选择框提供了这个角度代码段并且它有效。如何将其变为复选框？

<mat-form-field class="example-medium-width">
   <mat-select matInput name="learnerType" [(ngModel)]="learningPlan.learnerTypes" placeholder="Learner Type" multiple #field_learnerType="ngModel">
      <mat-option *ngFor="let learnerType of learnerTypes" [value]="learnerType">
        {{ learnerType }}
      </mat-option>
   </mat-select>
</mat-form-field>

material.angular.io网站上的复选框上的示例是关于复选框，每个复选框都有不同的名称！通常，您希望相关的复选框选项与名称相关联。只有这样，您才能将选中的值作为一个大块发送到服务器（使用逗号分隔）。

就像上面选择的UI选项一样。但我希望将选项作为复选框进行布局。

第2部分//这是在material.angular.io

上尝试示例之后

以下也不起作用。我在代码片段后附上了错误消息。

<mat-form-field matInput class="example-medium-width">
    <section class="example-section">
        <mat-checkbox matInput name="checked" class="example-margin" [(ngModel)]="checked">Checked</mat-checkbox>
        <mat-checkbox matInput name="indeterminate" class="example-margin" [(ngModel)]="indeterminate">Indeterminate</mat-checkbox>
    </section>
</mat-form-field>

此代码生成的错误如下：

ERROR Error: mat-form-field must contain a MatFormFieldControl. Did you forget to add matInput to the native input or textarea element? at getMatFormFieldMissingControlError (form-field.es5.js:89)

Answer 1

您可以向FormArray添加控件，并根据选择

获取选中的值

<div *ngFor="let cricketer of cricketers; let i = index" >
<mat-checkbox class="example-margin" 
    (change)="onChange($event)" [value]="cricketer">{{cricketer}}</mat-checkbox>
</div>

EXAMPLE

角度4.4上的复选框实现

1 个答案: