如何使用 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

您要查找的属性是 [disabled]。

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

Typescript：

初始化形式：

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

条件必须为真。

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