48

我有一些输入（复选框），如果我的布尔值为真，我希望它们被禁用。但它不起作用......有趣的是提交按钮工作得很好，那是相同的方法......

我的组件.html

          <form [formGroup]="BetreuungsoptionForm" (ngSubmit)="onSubmit()">
            <label *ngIf="!eingetragen" for="art">Art</label>
            <select *ngIf="!eingetragen" formControlName="art" id="art" class="form-control" [(ngModel)]="Art" required >
              <option value="festeAnmeldung">feste Anmeldung</option>
              <option value="flexibleAnmeldung">flexible Anmeldung</option>
            </select>
            <label for="datum">Beginn Datum</label>
            <input formControlName="datum" type="date" id="datum" class="form-control" required>
            <label *ngIf="(Art == 'festeAnmeldung')" for="montag">Montag</label>
            <input *ngIf="(Art == 'festeAnmeldung')" formControlName="montag" [disabled]="montag" type="checkbox" id="montag" class="form-control wochentag">
            <label *ngIf="(Art == 'festeAnmeldung')" for="dienstag">Dienstag</label>
            <input *ngIf="(Art == 'festeAnmeldung')" formControlName="dienstag" [disabled]="dienstag" type="checkbox" id="dienstag" class="form-control wochentag">
            <label *ngIf="(Art == 'festeAnmeldung')" for="mittwoch">Mittwoch</label>
            <input *ngIf="(Art == 'festeAnmeldung')" formControlName="mittwoch" [disabled]="mittwoch" type="checkbox" id="mittwoch" class="form-control wochentag">
            <label *ngIf="(Art == 'festeAnmeldung')" for="donnerstag">Donnerstag</label>
            <input *ngIf="(Art == 'festeAnmeldung')" formControlName="donnerstag" [disabled]="donnerstag" type="checkbox" id="donnerstag" class="form-control wochentag">
            <label *ngIf="(Art == 'festeAnmeldung')" for="freitag">Freitag</label>
            <input *ngIf="(Art == 'festeAnmeldung' )" formControlName="freitag" [disabled]="freitag" type="checkbox" id="freitag" class="form-control wochentag">
        <button type="submit" [disabled]="!BetreuungsoptionForm.valid" class ="btn btn-primary">Speichern</button>
        <button type="button" (click)="OnBetreuungsoptionInfos()" class ="btn btn-success">weitere Informationen</button>
        <button type="button" *ngIf="!gekuendigt" (click)="OnBetreuungsoptionLoeschen()" class ="btn btn-danger">Kündigen</button>
      </form>

我的组件.ts

        this.BetreuungsoptionForm = new FormGroup
        ({
          art: new FormControl(),
          datum: new FormControl(this.BetreuungsoptionenKindRef[d].Beginn.toString().substring(0,10)),
          montag: new FormControl(this.BetreuungsoptionenKindRef[d].Montag),
          dienstag: new FormControl(this.BetreuungsoptionenKindRef[d].Dienstag),
          mittwoch: new FormControl(this.BetreuungsoptionenKindRef[d].Mittwoch),
          donnerstag: new FormControl(this.BetreuungsoptionenKindRef[d].Donnerstag),
          freitag: new FormControl(this.BetreuungsoptionenKindRef[d].Freitag)
        })
          if(this.BetreuungsoptionenKindRef.Montag)
          {
            this.montag = true;
          }
          if(this.BetreuungsoptionenKindRef.Dienstag)
          {
            this.dienstag = true;
          }
          if(this.BetreuungsoptionenKindRef.Mittwoch)
          {
            this.mittwoch = true;
          }
          if(this.BetreuungsoptionenKindRef.Donnerstag)
          {
            this.donnerstag = true;
          }
          if(this.BetreuungsoptionenKindRef.Freitag)
          {
            this.freitag = true;
          }
4

8 回答 8

81

尝试[attr.disabled]="freitag? true : null"或[attr.readonly]="freitag"代替。

您可以以[class.btn-lg]="someValue"类似的方式使用属性。

您的文本框因此而起作用：

disabled 属性是另一个特殊的例子。默认情况下，按钮的 disabled 属性为 false，因此该按钮处于启用状态。当您添加 disabled 属性时，它的存在单独将按钮的 disabled 属性初始化为 true，因此按钮被禁用。

添加和删​​除 disabled 属性会禁用和启用按钮。该属性的值无关紧要，这就是为什么您不能通过编写来启用按钮的原因<button disabled="false">Still Disabled</button>。

来自https://angular.io/guide/template-syntax

于 2018-05-02T09:12:59.627 回答
20

试试这个，相信我它的工作..

<input [disabled]="isLoading ? true : null" />

使用null代替false

于 2019-04-17T02:15:28.123 回答
16

反应式表单不支持本机“禁用”属性。如果您希望它们按照您想要的方式工作，请尝试探索：https ://netbasal.com/disabling-form-controls-when-working-with-reactive-forms-in-angular-549dd7b42110

另请参阅 Angular 反应式表单文档以在表单控制中执行此类操作。

例如：new FormControl({value:'tom', disabled: true})

于 2018-05-02T09:28:08.720 回答
2

反应形式：

.html 文件：

<textarea class="form-control" rows="4" formControlName="message" [readonly]="disableMessage"></textarea>

.ts 文件：

disableMessage = true;

于 2020-09-11T06:34:31.880 回答
0

如果您使用引导程序并使用类应用任何背景颜色，只需将其删除。它会起作用的。

        <button type="submit" class='**bg-primary** text-left form-control w-auto text-white mt-4' [disabled]="manageUsers.invalid">Submit</button>

请删除类字段中的“bg-primary”。那么它将起作用。

于 2021-04-01T03:36:02.973 回答
0

就我而言，我错误地使用了 FormControl，期望它具有像 [formControl]="CtrlName"我删除它时那样的控件名称，现在禁用工作正常。

这是对我有用的禁用标签

[disabled]="isDisabledVariable"
于 2021-08-26T03:51:09.793 回答
0

请注意，如果您使用的是 Angular Material按钮，正确的方法是：

<button mat-button [disabled]="condition">Button</button>

由于库定义了一个输入属性，例如@Input('disabled').

于 2021-09-22T17:16:16.570 回答
-1

对我来说，以上都不起作用，包括以下

[disabled]="!enableDelete">

对我有用的是

[disabled]="enableSave == 'false'">
于 2018-11-22T18:37:03.910 回答