时间戳

首页 > 解决方案 > Angular 10 Formly + 材质垂直多选框

angular - Angular 10 Formly + 材质垂直多选框

问题描述

我想用垂直视图创建正式的多复选框。但是当我创建一个这样的字段时，我仍然显示在同一行。

    {
  label: 'Zgody marketingowe',
  fields: [
    {
      key: 'agreementIds',
      type: 'multicheckbox',
      className: 'flex-1',
      templateOptions: {
        label: 'zgody!!!!!!',
        required: false,
        style: "background: green;",
        options: [
          {
            key: 'zgodaNr1',
            value: 1
          },
          {
            key: 'zgodaNr2',
            value: 2
          }
        ]
      }
    }
  ]
}

标签： angularangular-materialangular-formly

解决方案

我想，我有一个解决方案给你。要实现multicheckbox垂直视图，您可以尝试使用下面ul的li标签=> 这是Stackblitz Demo Link
下面的代码。

TS：

export class CheckboxOverviewExample {
 
  subtasks=[
      {id:1, name: 'Primary', completed: false, color: 'primary'},
      {id:2,name: 'Accent', completed: false, color: 'accent'},
      {id:3,name: 'Warn', completed: false, color: 'warn'}
    ];
  updateAllComplete(data:any){
  console.log(data);
  }
}

HTML：

<span class="example-list-section">
    <ul>
      <li *ngFor="let subtask of subtasks">
        <mat-checkbox [(ngModel)]="subtask.completed"
                      [color]="subtask.color" 
                      (ngModelChange)="updateAllComplete(subtask)">
          {{subtask.name}}
        </mat-checkbox>
      </li>
    </ul>
  </span>

推荐阅读