我有一个来自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绑定值。 在这里,我要编辑表单,因此在编辑之前需要显示值。