Angular [disabled] = MyBoolean не работает

У меня есть несколько входов (флажков), и я хочу, чтобы они были отключены, если мои логические значения верны. Но это не работает ... Забавно, что кнопка отправки работает нормально, и это тот же метод ...

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

person Kajot    schedule 02.05.2018    source источник


Ответы (6)


Попробуйте вместо этого [attr.disabled]="freitag? true : null" или [attr.readonly]="freitag".

Подобным образом вы можете использовать такие атрибуты, как [class.btn-lg]="someValue".

Ваше текстовое поле работает из-за этого:

Атрибут disabled - еще один своеобразный пример. По умолчанию свойство кнопки disabled имеет значение false, поэтому кнопка включена. Когда вы добавляете отключенный атрибут, только его присутствие инициализирует свойство disabled кнопки равным true, поэтому кнопка отключена.

Добавление и удаление атрибута disabled отключает и включает кнопку. Значение атрибута не имеет значения, поэтому вы не можете включить кнопку, написав <button disabled="false">Still Disabled</button>.

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

person reckface    schedule 02.05.2018
comment
Я пробовал это уже, но он не работает .. если я использую attr.disabled, все отключено, а если я использую disbaled, все включено - person Kajot; 02.05.2018
comment
Для входов наличие отключенного атрибута отключает вход независимо от значения - person reckface; 02.05.2018
comment
Ах, спасибо, все работает! И спасибо за объяснение - person Kajot; 02.05.2018
comment
Я нашел это заявление, freitag? true: null, было важно, чтобы он начал работать. Я считаю, что он проверяет свойство freitag. если это правда, он устанавливает значение disabled в true. Если это ложь, он устанавливает значение null. Насколько я понимаю, null просто полностью удаляет атрибут. - person Faisal Karim; 07.12.2020
comment
[attr.readonly] = true или false это тот же результат (только чтение), но [attr.readonly] = freitag? правда: null ‹< это работает! Спасибо - person Piyatorn Boss; 22.01.2021

Попробуйте, поверьте, это работает ...

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

Используйте null вместо false

person Syamsoul Azrien    schedule 17.04.2019
comment
Не работает для меня на Angular 9, установка значения null по-прежнему отключает ввод - person Mick; 17.08.2020
comment
‹Ввод [отключен] = условие? истина: ложь ›‹ input [attr.disabled] = condition? 'disabled': null › - person Don Dilanga; 17.11.2020
comment
null работает в Angular 6.1.10. - person Pinaki; 09.02.2021
comment
Боюсь, это не работает на Angular 11 - person nostop; 27.07.2021

Реактивные формы не поддерживают собственный атрибут disabled. Если вы хотите, чтобы они работали так, как вы хотели, попробуйте изучить это: https://netbasal.com/disables-form-controls-when-working-with-reactive-forms-in-angular-549dd7b42110

Также см. Документ по реактивным формам Angular, чтобы сделать что-то подобное в элементе управления формой.

Например: новый FormControl ({значение: 'том', отключено: истина})

person Chakri    schedule 02.05.2018
comment
Кажется, они нормально работают, когда я их использую. Например, [disabled] = some.form.status == 'INVALID' работает хорошо. - person rrd; 02.05.2018

Реактивные формы:

.html файл:

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

.ts файл:

disableMessage = true;

person Salahuddin    schedule 11.09.2020
comment
Не могли бы вы использовать разметку в своем ответе, чтобы он был более красивым? - person Mikayel Saghyan; 11.09.2020

Для меня ничего из вышеперечисленного не сработало, в том числе нижеприведенное

[disabled]="!enableDelete">

Что сработало для меня, так это

[disabled]="enableSave == 'false'">
person James Poulose    schedule 22.11.2018
comment
Похоже, ваш enableSave был строкой 'false', а не логическим false. - person Benjamin; 06.12.2019
comment
чем, вероятно, [disabled] = !! enableSave ›заставит его превратиться в логическое - person tibi; 23.06.2020

Если вы используете бутстрап и применяете любой цвет фона с помощью класса, просто удалите его. это будет работать.

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

Удалите bg-primary в поле класса. тогда это будет работать.

person Ramkumar    schedule 01.04.2021