如何使用 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.tsfalse，那么在 html 文件中，输入元素应该根据该值更改为禁用。

我也尝试过这个[disable]="disName"

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

Answer 1

你应该这样做：

<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();