web-dev-qa-db-fra.com

Angular 5 - Désactivation des boutons radio

J'ai un groupe de boutons radio dans Angular 5. Je souhaite désactiver certaines options à l'aide de l'attribut [disabled]. Cependant, je remarque que seul le premier bouton radio est désactivé. Voir mon lecteur: http://plnkr.co/edit/JzFmvjUyvhPdTkbYT1YZ?p=preview

Même si je code dur [disabled]="true", il ne désactive toujours pas le deuxième bouton radio. Je ne veux pas passer à utiliser un <select>, je suis donc curieux de savoir s'il existe un autre moyen de faire en sorte que cela fonctionne avec les boutons radio.

formsangularradio-button
5
Travis Parks

Il peut y avoir 2 solutions pour cela: -

1. Utilisation de l'attribut disabled ([attr.disabled])

Une solution à ce problème peut être d'utiliser l'attribut disabled ([attr.disabled]) au lieu de la propriété disabled ([disabled]), mais [attr.disabled] fonctionne légèrement différemment. , pour activer le bouton radio, vous devez passer null à [attr.disabled] et à toute valeur non nulle pour le désactiver. Considérez l'exemple ci-dessous: -

<input type="radio" name="enabled" [attr.disabled]="null" />Enabled1
<input type="radio" name="enabled" [attr.disabled]="null" />Enabled2

<input type="radio" name="disabled" [attr.disabled]="false" />Disabled1
<input type="radio" name="disabled" [attr.disabled]="false" />Disabled2

Dans cet exemple, le jeu de boutons radio nommé "enabled" sera activé car pour eux, [attr.disabled] est défini sur null, alors que le jeu de boutons radio "désactivé" sera désactivé malgré le [ attr.disabled] étant défini sur "false", car false est une valeur non nulle.

2. Utilisation de la balise fieldset  

Une autre solution encore meilleure pour résoudre ce problème consiste à utiliser la balise <fieldset> pour regrouper les boutons radio, puis à définir la propriété [disabled] sur cette balise <fieldset> au lieu de la radio individuelle. boutons. Voici un exemple pour le même: -

<fieldset [disabled]=true>
    <input type="radio" name="test" />yes
    <input type="radio" name="test" />no
</fieldset>
4
yatharth varshney

Cela fonctionne bien comme ceci [attr.disabled]="isDisabledState === true"

Et dans la classe de composant, vous pouvez avoir isDisabledState: boolean = true

2
DrNio

Une façon de résoudre le problème consiste à placer la liaison désactivée sur le dernier bouton radio du groupe. Voici une version modifiée de votre code: http://plnkr.co/edit/v6S5G7Do5NAMKzZvNdcd?p=preview

<input type="radio" name="answer" value="Yes" [(ngModel)]="name" /> Yes
<input type="radio" name="answer" value="No" [(ngModel)]="name" [disabled]="isDisabled()" /> No

Il y a un bogue et un problème de conception lors de la désactivation (à l'aide de [désactivé]) Angular des boutons radio pilotés par un modèle.

J'ai corrigé le bogue dans cette demande d'extraction: https://github.com/angular/angular/pull/20310

Le problème de conception est que nous mettons la liaison [disabled] sur un seul bouton radio, mais que tout le groupe est affecté par la liaison de données. Voici une version modifiée de votre code qui illustre le problème: http://plnkr.co/edit/3yRCSPsdjXqhUuU9QEnc?p=preview

2
Mohamed Gara

Compte tenu de la réponse de DrNio, vous devez utiliser attr.disabled et définir la valeur comme [valeur] = "'Oui'". En effet, assigner "Oui" rend angulaire de l’évaluer comme une expression plutôt que comme une valeur. Ainsi, votre élément d’entrée serait:

<input type="radio" name="answer" [value]="'Yes'" [(ngModel)]="name"   [attr.disabled]="isDisabled()"  />
0
Ankit Kapoor

J'ai fini par tricher. Au lieu d'utiliser le même nom pour les deux boutons radio, j'ai attribué un nom unique à chaque bouton radio et les ai liés au même champ de sauvegarde. http://plnkr.co/edit/zNbODcAqZMgjXfluxhW6?p=preview

@Component({
  selector: 'my-app',
  template: `
    <form>
      Hello {{name}}!!!
      <input type="radio" name="answer1" value="Yes" [(ngModel)]="name" [disabled]="isDisabled1()" /> Yes
      <input type="radio" name="answer2" value="No" [(ngModel)]="name"  [disabled]="isDisabled2()" /> No
    </form>
  `,
})
export class App {
  name:string;
  isDisabled1(): boolean {
    return false;
  },
  isDisabled2(): boolean {
    return false;
  }
}

Puisqu'ils sont tous deux liés au même champ de sauvegarde, ils finissent par s'exclure mutuellement, en se comportant comme les boutons radio. Cela leur permet également d'être désactivés indépendamment.

Dans mon scénario réel, je n'ai en fait créé qu'une liaison unidirectionnelle avec des événements (click) pour définir la valeur liée, mais c'est la même astuce.

0
Travis Parks

Utilisez ceci: (pour une approche de forme réactive)

 <input
    type="radio"
    id="primaryIPV6"
    value="2"
    [attr.disabled]="flagValue ? '' : null"
    formControlName="p_ip_type"
    (change)="optionalFn()">

null: false and true/'': pour true

0
Abhishek Gautam

Voici votre code courant mis à jour et punker .. 

Mise à jour Plunker

@Component({
  selector: 'my-app',
  template: `
    <form>
      Hello {{name}}!!!
      <input type="checkbox" name="dus" [(ngModel)]="isDisabled">
      <input type="radio" name="answer" value="Yes" [(ngModel)]="name" [disabled]="isDisabled" /> Yes
      <input type="radio" name="answer" value="NO" [(ngModel)]="name"  [disabled]="isDisabled" /> No
    </form>
  `,
})
export class App {
  name = 'Yes';;
  isDisabled = true;
}
0
Vasim Hayat