我有一些输入(复选框),如果我的布尔值为真,我希望它们被禁用.

我的成分.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>

myComponent.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;
          }

推荐答案

试试[attr.disabled]="freitag? true : null"[attr.readonly]="freitag"吧.

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

你的文本框之所以能工作,是因为:

disabled属性是另一个特殊的例子.一颗纽扣

添加和移除Disabled属性会禁用和启用 按钮.属性的值是无关紧要的,这就是为什么 不能通过写入<button disabled="false">Still Disabled</button>来启用按钮.

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

Angular相关问答推荐

Angular KendoGrid RowReorderable,drop不适用于新添加的行

带独立零部件的TranslateLoader[Angular 16]

无法在Mat-SideNav中绑定模式

如何在 Angular 中每 x 秒从 REST api 加载数据并更新 UI 而不会闪烁?

使用 Electron 打包器打包 Electron Angular 应用程序时无法加载资源

Nx Angular Monorepo 中 cypress 组件测试的代码覆盖率?

如何在 Angular14 中创建带有验证的自定义输入组件?

显示带有数组子列的标题表 - Angular

Angular 2:Validators.pattern() 不工作

如何在两个模块之间共享服务 - @NgModule 在Angular 而不是在组件之间?

错误:formControlName 必须与父 formGroup 指令一起使用.您需要添加一个 formGroup 指令

由于时区,Angular 4 日期管道显示错误的日期 - 如何解决这个问题?

如何将一个组件放入Angular2中的另一个组件中?

Angular将 Select 值转换为 int

安装特定版本的 ng cli

如何使用无头浏览器运行测试?

declarations和entryComponents组件有什么区别

'ng' 不是内部或外部命令、可运行程序或批处理文件

Angular2/4 中的ng-reflect-*属性有什么作用?

Error: Can't resolve 'core-js/es7/reflect' in '\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models