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] =“true”，用户可以打开浏览器HTML检查器并更改值并保存，我也不想在服务器上验证这些权限。我搜索了很多关于这个并且找不到任何建议，有没有人知道我该怎么做？

Answer 1

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

它还会覆盖本机已禁用，因此我不需要使用该指令以及本机已禁用。

指令代码：

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">

如果有人能帮助我以任何方式改进这种方法，但这是按照我的意愿行事。

避免写入输出到ngModel的指令[Angular]

1 个答案: