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

Question

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

使用示例： 指令选择器：d-避免-更改

<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 保存在私有变量中，然后如果它收到 Input 参数为TRUE，它将忽略更改并放置原始 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">

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