问在基于模板的表单中将所有表单控件设置为只读

EN

import {Directive, ContentChildren, QueryList, AfterContentInit, Input} from '@angular/core';
import {NgModel} from '@angular/forms';

@Directive({
    selector: 'form[readonly]'
})
export class FormReadonlyDirective implements AfterContentInit
{
    @ContentChildren(NgModel)
    public inputs:QueryList<NgModel>;

    private controls:any[];

    private _readonly:boolean = false;

    public ngAfterContentInit():void
    {
        this.controls = this.getControls();

        this.inputs.changes.subscribe(() =>
        {
            this.setReadonly(this.readonly);
        });

        this.setReadonly(this.readonly);
    }

    @Input()
    public get readonly():boolean
    {
        return this._readonly;
    }

    public set readonly(value:boolean)
    {
        this._readonly = value != null && value !== false && `${value}` !== 'false';
        this.setReadonly(value);
    }

    private setReadonly(value:boolean):void
    {
        if(this.controls != null)
        {
            this.controls.forEach(control =>
            {
                //todo: check
                control.readonly = value;
            });
        }
    }

    private getControls():any[]
    {
        return this.inputs.map(control => control.valueAccessor);
    }
}