web-dev-qa-db-fra.com

Angular [disabled] = "MyBoolean" ne fonctionne pas

J'ai quelques entrées (cases à cocher) et je veux qu'elles soient désactivées si mes booléens sont vrais. Mais ça ne marche pas ... Le plus drôle, c'est que le bouton de soumission fonctionne très bien et c'est la même méthode ...

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;
      }
angularproperty-binding
6
Kai

Essayez [attr.disabled]=freitag? true : null" ou [attr.readonly]="freitag" à la place Vous pouvez utiliser des attributs comme [class.btn-lg]="someValue" d'une manière similaire.

Votre zone de texte fonctionne pour cette raison:

L'attribut désactivé est un autre exemple particulier. La propriété désactivée d'un bouton est fausse par défaut, donc le bouton est activé. Lorsque vous ajoutez l'attribut désactivé, sa présence à elle seule initialise la propriété désactivée du bouton à true pour que le bouton soit désactivé.

L'ajout et la suppression de l'attribut désactivé désactive et active le bouton. La valeur de l'attribut n'est pas pertinente, c'est pourquoi vous ne pouvez pas activer un bouton en écrivant <button disabled="false">Still Disabled</button>.

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

7
reckface

Les formulaires réactifs ne prennent pas en charge l'attribut natif "désactivé". Si vous souhaitez qu'ils fonctionnent comme vous le souhaitez, essayez d'explorer ceci: https://netbasal.com/disabling-form-controls-when-working-with-reactive-forms-in-angular-549dd7b4211 =

Voir aussi Angular formulaires réactifs pour faire quelque chose comme ça dans le contrôle de formulaire.

Par exemple: nouveau FormControl ({valeur: 'tom', désactivé: vrai})

5
Chakri

Essayez ceci, croyez-moi, ça marche ..

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

Utilisez null au lieu de false

0
Syamsoul Azrien

Pour moi, rien de ce qui précède n'a fonctionné, y compris le ci-dessous

[disabled]="!enableDelete">

Ce qui a fonctionné pour moi était

[disabled]="enableSave == 'false'">
0
James Poulose