1

我正在为 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选项。

4

0 回答 0