如何使用Angular 7动态禁用输入

Question

我正在尝试根据从Component.ts中获取的值来禁用输入

在我的component.ts文件中，我有这个值

disName = false;

而且在我的HTML中，我有这些元素

Name: <input type="text"
             value="name"
             size="15"
             id="name"
             name="firstName"
             [(ngModel)]="aproverFirstName"
             [attr.disable]="disName=='true' ? true : null">

寻找的是，如果我在component.ts上的值是false，那么在html文件中，输入元素应根据值更改为禁用。

我也尝试过此[disable]="disName"

我正在使用Angular 7，非常感谢！

Answer 1

您要查找的属性为[已禁用]。

<input type="text" [disabled]="true" />

Answer 2

您应该这样做：

<input type="text"
             value="name"
             size="15"
             id="name"
             name="firstName"
             [(ngModel)]="aproverFirstName"
             [disabled]="disName">

但是，我更喜欢在Angular中使用@angular/forms，然后您可以像这样初始化表单：

HTML：

<input type="text"
                 value="name"
                 size="15"
                 id="name"
                 formControlName="firstName">

打字稿：

初始化形式：

this.sampleForm= this.fb.group({
      firstName: [{ value: '', disabled: true }, Validators.required]
});

控制启用和禁用：

this.sampleForm.controls.firstName.enable();
this.sampleForm.controls.firstName.disable();

Answer 3

尝试一下

  <input type="text" [disabled]="!disName">

条件必须为真。

您是否将这个“ input”标签放入component.html中？