Javascript 用于禁用第页上所有按钮和输入的Angular2指令

我想写一个属性指令，它应用于元素将禁用其中的所有输入和按钮，因此表单将成为只读的。我目前的解决方案如下所示（仅适用于按钮，但对于锚定和输入则非常简单）：

如您所见，我使用普通javascript查找元素，但使用渲染器设置元素的属性

我有两个问题：

有没有更好、更干净的Angular2方法可以在不使用普通javascript查找元素的情况下实现这一点

---

是否有任何方法可以确保前端的安全性，以确保用户不会启用按钮并单击它？我考虑过结构指令，它将移除按钮并将虚拟对象放在那个里，但我不知道什么是正确的方法

---

“有没有办法使前端安全…”永远不要假设前端可以100%安全。@Phix当然也会有后端验证，但我的意思是最好的选择。嗨，我有一个类似的场景。最后，您是否遵循了问题中提出的模式？Hello@gipinani-是的，我们正在应用程序中使用此指令，并且它正常工作。

@Directive(
    {
        selector: '[read-only]'
    }
)
export class ReadOnlyDirective implements AfterViewInit, OnDestroy {
    private currentElement: ElementRef;

    constructor(private element: ElementRef, private renderer: Renderer) {
        this.currentElement = element;
    }

    ngAfterViewInit(): void {
        let elements = this.element.nativeElement.getElementsByTagName('button');
        let elementsArray = Array.prototype.slice.call(elements);
        elementsArray.forEach(element => this.renderer.setElementAttribute(element, 'disabled', 'disabled'));
    }
}