Я использую пользовательский компонент для multiCheckbox с ControlValueAccessor
.
checkbox.component.ts
:
import {
Component,
OnInit,
forwardRef,
Input,
ViewChild,
ElementRef,
Output,
EventEmitter
} from "@angular/core";
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from "@angular/forms";
@Component({
selector: "app-checkbox",
templateUrl: "./checkbox.component.html",
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CheckboxComponent),
multi: true
}
]
})
export class CheckboxComponent implements OnInit, ControlValueAccessor {
isChecked = false;
public userStatus = [
{name: 'user1', checked: true},
{name: 'user2', checked: false},
{name: 'user3', checked: false}
]
propagateChange = (_: any) => {};
onTouchedCallback = () => {};
constructor() {}
ngOnInit() {}
writeValue(value: any) {
this.checked = value;
}
submit($event: Event) {
console.log(this.userStatus);
}
registerOnChange(func: any) {
this.propagateChange = func;
}
registerOnTouched(func: any) {
this.onTouchedCallback = func;
}
}
checkbox.component.html
:
<section class="checkbox-section" *ngFor="let opt of userStatus">
<mat-checkbox [(ngModel)]="opt.checked" name="{{opt.name}}">{{ opt.name }}</mat-checkbox>
<br>
CheckBox Name {{ opt.name }}
</section>
<br><br>
{{userStatus | json}}
До этого момента он работает нормально.Но проблема в том, что я не могу передать ngModel
родительскому компоненту, где checkboxes
ограничен.
**parent.component.html**
:
<app-checkbox [name]="'CheckBoxRoles'" [ngModel]="name"></app-checkbox>
Я не могу отследитьngModel
из всех трех флажков и передать их в один массив в качестве имени / статуса.В checkbox.component.html
сама работает нормально, но не в родительской.
Есть идеи, где я ошибаюсь?PS Я не хочу использовать: formGroup
опция.