javascript - 避免 writeOut 到 ngModel 的指令 [Angular]

Question

我想创建一个指令，当给它一个值为TRUE的变量时，如果用户更改输入值，它不会将该新值写入NgModel。

使用示例:指令选择器:d-avoid-change

<input type="text" name="surname" 
    [(ngModel)]="model.surname" 
    [d-avoid-change]="true">

如果来自服务器的姓氏模型是“Foo”并且用户将其更改为“Bar”，则 model.surname 保持“Foo”，我可以向用户发送消息。

我尝试使用该指令的另一种方法，即删除输入并单击“EventListener”，这样用户就无法单击，但这看起来像是一个错误。

我想使用它而不是 HTML 的 disabled 属性，因为如果我只使用 [disabled]="true"用户可以打开浏览器 HTML 检查器并更改值并保存，我也不想验证服务器上的这些权限。我对此进行了很多搜索，但找不到任何建议，有人知道我该怎么做吗？

Answer 1

找到了一种构建指令的方法，将原始 NgModel 保存在私有(private)变量中，然后如果它接收到的输入参数为 TRUE ，它将忽略更改并放入原始 NgModel 。

它还覆盖了 native 禁用，因此我不需要使用该指令以及 native 禁用。

指令代码:

import {
    Directive,
    ElementRef,
    AfterViewInit,
    Input,
    AfterContentInit,
    ViewContainerRef,
    Renderer2
} from '@angular/core';
import { NgModel } from '@angular/forms';
import { Observable } from 'rxjs/Observable';

declare let $;

@Directive({
    selector: '[d-disabled]',
    providers: [NgModel]
})
export class DisabledDirective implements AfterViewInit {

    @Input('d-disabled')
    set disabled(disabled: boolean) {
        if (disabled) {
            this.renderer.setAttribute(this.el.nativeElement, 'disabled', 'true');
        } else {
            this.renderer.removeAttribute(this.el.nativeElement, 'disabled');
        }
        this._disabled = disabled;
    }

    _disabled: boolean;
    originalModel: any;

    constructor(private el: ElementRef,
        private ngModel: NgModel,
        private renderer: Renderer2) {
        this.ngModel.valueAccessor.registerOnChange = this.registerOnChange;
        this.ngModel.valueAccessor.registerOnTouched = this.registerOnTouched;

        this.originalModel = this.ngModel;
    }

    ngAfterViewInit() {
        Observable.fromEvent(this.el.nativeElement, 'input')
            .map((n: any) => n.target.value)
            .subscribe(n => {
                if (this._disabled) {
                this.ngModel.viewToModelUpdate(this.originalModel.value);
                this.ngModel.control.patchValue(this.originalModel.value);
                this.ngModel.control.updateValueAndValidity({ emitEvent: true });
            } else {
                    this.onChangeCallback(n);
                }
            });
    }

    private onChangeCallback: (_: any) => void = (_) => { };

    private onTouchedCallback: () => void = () => { };

    registerOnChange = (fn: (_: any) => void): void => { this.onChangeCallback = fn; };
    registerOnTouched = (fn: () => void): void => { this.onTouchedCallback = fn; };

}

如何使用:

<input type="text" name="surname" 
    [(ngModel)]="model.surname" 
    [d-disabled]="true">

如果有人可以帮助我以任何方式改进这个方法，但这正在按我的意愿工作。