Angular自定义复选框无法同步ngModel状态，标准复选框正常

问题描述 #

自定义Angular复选框组件无法同步ngModel变化，仅在鼠标悬停父组件时视图才会更新正确状态。替换为原生<input type="checkbox">可正常工作，排查发现Angular已正确更新控件值，但视图未同步；悬停父组件时触发变更检测，视图才会刷新，第三次悬停无变化。

组件代码 #

CheckboxInputComponent #

export class CheckboxInputComponent extends AbstractInputComponent implements ControlValueAccessor, Validator  {

    @Input() public inxs: string;
    @Input() public grouped = true;
    @Input() public checked: boolean;
    @Input() public labeled = true;

    @Input() public name: string;

    @Input() public intermediate = false;

    @ViewChild('cb') public cb: ElementRef;

    @ContentChild('checkBoxLabel') labelTemplate;

    constructor ( protected cdr: ChangeDetectorRef ) {
        super(cdr);
    }

    public toggleCheck(): void {
        if (!this.grouped) {
            this.value = !this.value;
            this.checked = !this.checked;
        }
        this.intermediate = false;
    }

    private checkIntermediate(c: FormControl): void {
        if ( this.cb ) {
            if ( !(c.dirty || c.touched) ) {
                this.cb.nativeElement.intermediate = this.intermediate;
            } else {
                this.cb.nativeElement.intermediate = false;
            }
        }
    }

    protected customValidate( c: FormControl ): unknown | null {
        this.checkIntermediate(c);
        if ( c.dirty || c.touched ) {
            const noValue = this.hasNoValue(c);
            if ( this.required && noValue ) {
                return { 'required': true };
            }
        }
        return null;
    }

    protected normalize ( v: any ): any {
        return v;
    }

    protected hasNoValue(c: FormControl ): boolean {
        return c.value !== true;
    }
}

抽象类AbstractInputComponent #

@Directive()
export abstract class AbstractInputComponent implements OnChanges {

    /**
     * inner value
     */
    protected innerValue: unknown = null;
    protected innerErrors: AbstractInputErrors;

    /**
     * field label
     */
    @Input() public label: string;

    /**
     * required boolean
     */
    @Input() public required = false;


    /**
     * read only
     */
    @Input() public isReadOnly = false;

    /**
     * placeholder to show
     */
    @Input() public placeholder: string;

    @Input() public disabled = false;

    /**
     * control reference
     */
    @ViewChild('fieldInput') public fieldInput: NgModel;

    public isFocused = false;

    // infrastructure
    public registerOnChange(fn: any) { this.propagateChange = fn; }
    public registerOnTouched(fn: any) { this.propagateTouch = fn; }

    public propagateChange = (_: any) => { };
    public propagateTouch = (_: any) => { };

    constructor(
        protected cdr: ChangeDetectorRef
        ) { }

    public ngOnChanges(): void {
        if ( this.isReadOnly ) {
            this.propagateChange(this.value);
        }
        this.cdr.detectChanges();
    }

    public onFocus(): void {
        this.isFocused = true;
    }

    public onBlur(): void {
        this.isFocused = false;
        this.propagateTouch(true);
    }

    public get value(): any {
        return this.innerValue;
    };

    @Input() public set value(value: any) {
        if ( value !== undefined ) {
            this.writeValue(value);
            this.propagateChange(this.innerValue);
            this.propagateTouch(true);
        }
    }

    public writeValue(value: any): void {
        if (value !== this.innerValue) {
            this.innerValue = this.normalize(value);
        }
    }

    public setDisabledState(state: boolean): void {
        this.disabled = state;
    }

    public get errors(): AbstractInputErrors {
        return this.innerErrors;
    }

    public set errors( err: AbstractInputErrors ) {
        if ( this.fieldInput ) {
            if ( err ) {
                this.innerErrors = err;
            }
            this.fieldInput.control.setErrors(err);
        }
    }

    public validate(c: FormControl): unknown | null {
        this.innerErrors = (this.isReadOnly) ? null : this.customValidate(c);
        this.errors = this.innerErrors;
        return this.errors;
    }

    protected abstract normalize(value)
    protected abstract customValidate(control)
    protected abstract hasNoValue(value)
}

组件模板 #

<div class="ultim-checkbox"
    [class.readonly]="isReadOnly"
    [class.checked]="value"
    [class.intermediate]="intermediate"
    (click)="toggleCheck()">
    <input type="checkbox"
        [required]="required"
        [checked]="checked"
        [(ngModel)]="value"
        [attr.intermediate]="intermediate || null"
        #fieldInput="ngModel"
        #cb>
    <span><i class="ico"
            [ngClass]="{
                'i-check-fat': !intermediate,
                'i-minus-fat': intermediate
            }"></i></span>
</div>

父组件使用方式 #

<ultim-checkbox *ngIf="multiEditMode"
    [(ngModel)]="data.meta.isSelected"
    (change)="onSelect(data)"></ultim-checkbox>

问题分析 #

1. 表单控件状态冲突：模板中同时使用[checked]="checked"和[(ngModel)]="value"，ngModel已负责管理复选框的选中状态，手动绑定checked会干扰Angular的表单状态同步逻辑，导致视图与数据模型不一致。
2. 变更检测未及时触发：在toggleCheck方法更新value后，未手动触发变更检测，Angular的自动变更检测未捕获到状态变化，仅当父组件悬停触发变更检测时才会刷新视图。
3. 数据双源不一致：组件同时维护value和checked两个状态源，两者未实时同步，进一步加剧了视图与模型的不一致问题。

解决方案 #

1. 移除模板中冲突的checked绑定 #

完全由[(ngModel)]="value"管理复选框选中状态，删除[checked]="checked"：

<input type="checkbox"
    [required]="required"
    [(ngModel)]="value"
    [attr.intermediate]="intermediate || null"
    #fieldInput="ngModel"
    #cb>

2. 同步状态源，移除冗余的checked输入属性 #

删除CheckboxInputComponent中的@Input() public checked: boolean;，统一用value管理选中状态；若需保留该属性，需在ngOnChanges中同步checked与value：

import { SimpleChanges } from '@angular/core';

// 在CheckboxInputComponent中添加
ngOnChanges(changes: SimpleChanges): void {
    super.ngOnChanges();
    if (changes['checked'] && !changes['checked'].firstChange) {
        this.value = this.checked;
    }
}

3. 手动触发变更检测 #

在toggleCheck方法更新value后，调用变更检测刷新视图：

public toggleCheck(): void {
    if (!this.grouped) {
        this.value = !this.value;
        // 移除this.checked = !this.checked，已统一用value管理
    }
    this.intermediate = false;
    this.cdr.detectChanges(); // 触发视图更新
}

4. 优化抽象类的writeValue方法 #

在外部更新值时，确保触发变更检测：

public writeValue(value: any): void {
    if (value !== this.innerValue) {
        this.innerValue = this.normalize(value);
        this.cdr.detectChanges(); // 同步视图
    }
}

内容的提问来源于stack exchange，提问作者pop