在ng-select多选复选框角度6上显示值

时间:2018-12-19 11:49:16

标签: angular

我有一个来自get API的对象数组,在编辑值之前需要在ng-select框上显示它,因为它是多选复选框,它不绑定到数组中的选项

import {
  Component,
  OnInit
} from '@angular/core';
import {
  FormBuilder,
  FormControl,
  FormGroup,
  Validators
} from '@angular/forms';


@Component({
  selector: 'app-role',
  templateUrl: './role.component.html',
  styleUrls: ['./role.component.scss'],
  providers: [MasterService, CommonHelper]
})
export class RoleComponent implements OnInit {
  editRoleForm: FormGroup;
  options = [{
      "actionId": 1,
      "actionName": "First"
    },
    {
      "actionId": 2,
      "actionName": "Second"
    },
    {
      "actionId": 3,
      "actionName": "Third"
    }
  ]

  openEditModal(formData: any, template: TemplateRef < any > ) {

    this.modalRef = this.modalService.show(template);
    let status = formData.status === 'active' ? true : false;
    this.editRoleForm = this.fb.group({
      editRoleActions: [this.options, [Validators.required]],

    });
  }
}
<div class="form-group">
  <label for="actions" class="control-label">Features</label>
  <ng-select [items]="options" [multiple]="true" bindLabel="actionName" [closeOnSelect]="false" bindValue="id" placeholder="Select Feature" formControlName="editRoleActions">
    <ng-template ng-optgroup-tmp let-item="item" let-item$="item$" let-index="index">
      <input id="item-{{index}}" type="checkbox" [ngModel]="item$.selected" /> {{item.actionName | uppercase}}
    </ng-template>
    <ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
      <input id="item-{{index}}" type="checkbox" [(ngModel)]="item$.selected" [ngModelOptions]="{ standalone : true }" />{{item.actionName}}
    </ng-template>
  </ng-select>
</div>

我正在使用formControlName绑定值。 在这里,我要编辑表单,因此在编辑之前需要显示值。

0 个答案:

没有答案