有条件地在 Angular 2 或 4 中将输入字段设为只读:建议 + 最佳/哪种方式

Question

我试图回答别人的问题。在这样做的过程中，我意识到我心中对一些事情有相当多的不确定性。 我希望有人能就编号点 1..4 提供反馈：

任务：有条件地将输入字段设为只读

HTML 的相关部分：

<input type="text" placeholder="Club Name" #clubName>

将其添加到打字稿组件。

// class properties
@ViewChild('clubName')
inp:HTMLInputElement; // Could also use interface Element
// conditionally set in some other methods of class
inp.setAttribute('readonly', 'readonly');
inp.removeAttribute('readonly');

不得不说这对我来说是一个灰色地带。

1. 在 Angular 2+ 中直接使用@ViewChild引用HTMLInputElement或Element是一种不好的做法吗？ 只是，我经常看到使用ElementRef或从ElementRef链接到nativeElement的例子。

由于VS Studio对这些没有智能感知，我突然觉得我在黑暗中编码。 也就是说，你永远不会得到关于方法setAttribute或removeAttribute的反馈，它们的参数要求等。 (我也知道 至于演员(

---

然后，在
2. 查看文档后，我怀疑您可以直接在 HTML 模板中的输入上执行此操作：

---

<input [attr.readonly]= "isReadOnly">

IIRC 我认为你必须用打字稿中的属性来做到这一点：

get isReadOnly() :boolean {
}

这种方式有效吗？

---

3. 我想知道，您也可以在 HTML 模板中执行方法语法吗：

---

<input [attr.readonly]= "isReadOnly()">

打字稿

isReadOnly() :boolean {
}

这种方式有效吗？

---

4. 综上所述，最好的方法是什么？

更新：还有 *ngIF，因此您可以输出两个具有相同名称的输入元素之一。但在我看来，这听起来像是一把大锤来敲碎一个坚果。

Answer 1

您需要使用以下(Angular 4(：

<input [readonly]="isReadOnly">

如果使用att.readonly则输入将始终是只读的，因为即使其值为 false，readonly属性也会存在。通过使用[readonly]Angular将仅在isReadOnly为真时放置属性。

在 HTML 中，以下内容足以使输入为只读：

<input readonly>

Answer 2

一切都取决于你想要实现的目标。乍一看，我会说 pct. 2 是最简单的方法：

<input [attr.readonly]= "isReadOnly">

然后，在组件上声明变量：

isReadOnly: boolean;

之后，您可以根据需要分配值：

// when you want to be read-only
isReadOnly = true;
// whe you want to be editable
isReadOnly = false;

Answer 3

他们都不适合我。最终通过创建自定义指令角度找到了解决方案。指令是角度的强大功能

1. 创建自定义指令

@Directive({
selector: '[readonly],[readOnly]',
host: {
'[attr.readonly]': '_isReadonly ? "" : null'
}
})
class ReadonlyDirective {
_isReadonly = false;
@Input() set readonly (v) {
this._isReadonly = coerceBooleanProperty(v);
};
ngOnChanges(changes) {
console.log(changes);
}
}

2. 添加到模块声明中

@NgModule({
...
declarations: [ ..., ReadonlyDirective ],
...
})

3.现在是时候使用如下指令了。

<input [(ngModel)]="name" [readonly]="isReadonly" />
or
<input [(ngModel)]="name" readonly />

指令是棱角的强功能，我强烈建议你通过 https://angular.io/guide/attribute-directives

演示 https://stackblitz.com/edit/angular-readonly-input-aifncy?file=src/app/app.component.ts

Answer 4

很多时候，在 false 的情况下，可能需要 readonly 属性根本不存在(例如，由于样式或继承的功能(。您可以通过将值设置为 null 来实现这一点：

[readonly]="shouldBeReadonly ? 'readonly' : null"

null 从元素中删除属性。

Answer 5

我已经修复了它:)

<input matInput type="text" (focus)="userNameFocus()" placeholder="Username" #u1 formControlName="userName" autocomplete="off" />
// initialize form on userName focus
<input matInput [type]="inputType" style="-webkit-text-security: square;" #p2 formControlName="password" />

Answer 6

有一个更简单的解决方案，只需使用

@Input('readonly') readonly: boolean
ngOnInit(){
this.readonly= this.readonly!== undefined && this.readonly!== false
}

现在，组件上的只读 attr 将是

false:
<app-component>
<app-component [readonly]='false'>
true:
<app-component readonly>
<app-component [readonly]='true'>

Answer 7

当我尝试顶部答案中的解决方案时，出现以下错误：

Can't bind to 'readOnly' since it isn't a known property of 'select'.ngtsc(-998002)

最终对我有用的解决方案是：

[attr.readonly]="isReadonly() ? true : null"

我认为"attr."是必要的，"null"对于完全删除只读属性是必要的(而不仅仅是设置为 false，这仍然使元素只读(。

Answer 8

您可以使用<input readonly="{{ variable }}>".

在*.component.ts中，初始化变量：

private variable: boolean = true;

Answer 9

组件.html

<input matInput formControlName="status" [readonly]="!status" />

组件.ts

// when you want to be read-only
isReadOnly = true;
// whe you want to be editable
isReadOnly = false;