it-swarm.com.de

Angular 5 - Auswahlknöpfe deaktivieren

Ich habe eine Optionsfeldgruppe in Angular 5. Ich möchte einige Optionen mit dem [disabled]-Attribut deaktivieren. Ich stelle jedoch fest, dass nur das erste Optionsfeld deaktiviert wird. Siehe meinen Plunker: http://plnkr.co/edit/JzFmvjUyvhPdTkbYT1YZ?p=preview

Selbst wenn ich [disabled]="true" hart codiere, wird das zweite Optionsfeld immer noch nicht deaktiviert. Ich möchte nicht zur Verwendung eines <select> wechseln, daher bin ich neugierig, ob es eine andere Möglichkeit gibt, dies mit Optionsfeldern zu erreichen.

5
Travis Parks

Hierfür gibt es zwei Lösungen: -

1. Verwendung des deaktivierten Attributs ([attr.disabled])

Eine Lösung für dieses Problem kann die Verwendung des deaktivierten Attributs ([attr.disabled]) anstelle der deaktivierten Eigenschaft ([disabled]) sein, aber [attr.disabled] funktioniert etwas anders Um das Optionsfeld zu aktivieren, müssen Sie null an [attr.disabled] übergeben und einen anderen Wert als null, um es zu deaktivieren. Betrachten Sie das folgende Beispiel: -

<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

In diesem Beispiel werden die Optionsfelder mit der Bezeichnung "enabled" aktiviert, da für sie [attr.disabled] auf null gesetzt wird, während die Optionsfelder mit der Bezeichnung "disabled" deaktiviert sind, obwohl [ attr.disabled] auf "false" gesetzt ist, da false ein Wert ist, der nicht null ist.

2. Fieldset-Tag verwenden  

Eine noch bessere Lösung für dieses Problem ist die Verwendung des Tags <fieldset> zum Gruppieren der Optionsfelder und das Festlegen der Eigenschaft [disabled] für diesen <fieldset> -Tag anstelle des einzelnen Radios Tasten. Unten ist ein Beispiel für dasselbe: -

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

Es funktioniert gut so [attr.disabled]="isDisabledState === true"

Und in der Komponentenklasse können Sie isDisabledState: boolean = true haben

2
DrNio

Eine Möglichkeit, mit dem Problem umzugehen, besteht darin, die deaktivierte Bindung auf dem letzten Optionsfeld der Gruppe zu platzieren. Hier ist eine modifizierte Version Ihres Codes: 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

Es gibt ein Fehler- und Designproblem bei der Deaktivierung (durch Verwendung von [deaktiviert]) Angular -Vorlagenschaltflächen.

Ich habe den Fehler in dieser Pull-Anfrage behoben: https://github.com/angular/angular/pull/20310

Das Designproblem besteht darin, dass wir die [deaktivierte] Bindung auf ein einzelnes Optionsfeld setzen, aber alle Gruppen sind von der Datenbindung betroffen. Hier ist eine modifizierte Version Ihres Codes, die das Problem veranschaulicht: http://plnkr.co/edit/3yRCSPsdjXqhUuU9QEnc?p=preview

2
Mohamed Gara

In Anbetracht der DrNio-Antwort sollten Sie attr.disabled verwenden und den Wert auf [value] = "'Yes'" setzen. Dies liegt daran, dass die Zuweisung als "Ja" dazu führt, dass der Winkel nicht nur als Wert, sondern als Ausdruck ausgewertet wird. Ihr Eingabeelement wäre also:

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

Ich habe mit ionic gearbeitet und das Folgende funktioniert für mich.

<ion-radio class="fix-radio_button" *ngIf="!IsSuspended" color="default" [disabled]="q.QuestionOptionId==q.AnswerId" [checked]="q.QuestionOptionId==q.AnswerId"></ion-radio>
0
Muhammad Awais

Am Ende habe ich geschummelt. Anstatt den gleichen Namen für beide Optionsfelder zu verwenden, gab ich jedem Optionsfeld einen eindeutigen Namen und band sie an dasselbe Hintergrundfeld. 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;
  }
}

Da beide an dasselbe Hintergrundfeld gebunden sind, schließen sie sich gegenseitig aus und verhalten sich so, wie sich die Optionsfelder verhalten. Dadurch können sie auch unabhängig voneinander deaktiviert werden.

In meinem realen Szenario habe ich eigentlich nur einseitige Bindung mit (click)-Ereignissen vorgenommen, um den gebundenen Wert festzulegen, aber es ist der gleiche Trick.

0
Travis Parks

Verwenden Sie dies: (für reaktive Formularansätze)

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

null: falsch und wahr/'': für wahr

0
Abhishek Gautam

Hier ist dein aktualisierter Laufcode und Punker. 

Plunker aktualisieren

@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