Как передать ngModel для Checkbox-Group с помощью ControlValueAccessor родительскому компоненту? - PullRequest
0 голосов
/ 25 марта 2019

Я использую пользовательский компонент для 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 опция.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...