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

Question

我们有一个基于模板的表单，它使用各种 Angular Material 控件（matInput、mat-select 等）。我们想为某些用户创建一个“只读”类型的视图。我的直接想法是简单地检查用户的权限，然后遍历所有表单控件并在需要时将它们设置为禁用。

这似乎适用于文本输入类型控件，但不适用于选择和复选框。另外，这会使我们不需要的控件变灰。

关于如何最好地实现这一点的任何想法？也许以某种方式禁用表单中的键盘和鼠标输入可能是我们想要的，但我不知道该怎么做。

Answer 1

我认为这是可能的，但您必须检查所有控件类型，例如 MatInput 公开 readonly 属性，它允许我们创建简单的指令，该指令将切换整个表单的 readonly 状态：

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);
    }
}

未经测试，但你明白了。