web-dev-qa-db-ja.com

Angular 5-ラジオボタンを無効にする

Angular 5.にラジオボタングループがあります。[disabled]属性を使用していくつかのオプションを無効にしたいのですが、実際に無効になるのは最初のラジオボタンだけです。私のプランカー： http://plnkr.co/edit/JzFmvjUyvhPdTkbYT1YZ?p=preview

[disabled]="true"をハードコーディングしても、2番目のラジオボタンは無効になりません。 <select>の使用に切り替えたくないので、ラジオボタンでこれを機能させる別の方法があるかどうか興味があります。

formsangularradio-button
9
Travis Parks

これには2つの解決策があります：-

1。disabled属性（[attr.disabled]）を使用

この問題の1つの解決策は、disabledプロパティ（[disabled]の代わりにdisabled属性（[attr.disabled]）を使用することです。 ））、ただし、[attr.disabled]は少し異なる動作をするため、[attr.disabled]およびnull以外の値で無効にします。以下の例を考えてください：-

<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

この例では、「enabled」という名前のラジオボタンのセットが有効になります。これは、[attr.disabled]がnullに設定されているのに対し、「disabled」という名前のラジオボタンのセット[attr.disabled]が「false」に設定されているにもかかわらず無効になります。これは、falseがnull以外の値だからです。 。

2。fieldsetタグを使用

この問題に対する別のさらに良い解決策は、ラジオボタンをグループ化するために<fieldset>タグを使用し、[disabled]個々のラジオボタンではなく、その<fieldset>タグのプロパティ。以下は同じ例です：-

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

このようにうまく機能します[attr.disabled]="isDisabledState === true"

そして、コンポーネントクラスでは、isDisabledState: boolean = true

2
DrNio

問題に対処する1つの方法は、グループ内の最後のラジオボタンに無効なバインディングを配置することです。コードの修正版は次のとおりです。 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

無効化（[disabled]を使用）にバグと設計上の問題がありますAngularテンプレート駆動ラジオボタン。

このプルリクエストのバグを修正しました： https://github.com/angular/angular/pull/2031

設計上の問題は、1つのラジオボタンに[無効]バインディングを配置することですが、データバインディングの影響を受けるのはすべてのグループです。以下に、問題を説明するコードの修正バージョンを示します。 http://plnkr.co/edit/3yRCSPsdjXqhUuU9QEnc?p=preview

2
Mohamed Gara

不正行為になりました。両方のラジオボタンに同じ名前を使用する代わりに、各ラジオボタンに一意の名前を付け、それらを同じバッキングフィールドにバインドしました。 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;
  }
}

どちらも同じバッキングフィールドにバインドされているため、最終的には相互に排他的になり、ラジオボタンのように動作します。また、それらを個別に無効にすることもできます。

私の実際のシナリオでは、バインドされた値を設定するために(click)イベントを使用して一方向のバインドのみを行いましたが、これは同じトリックです。

1
Travis Parks

DrNioの回答を考慮して、attr.disabledを使用し、値を[value] = "'Yes'"として設定する必要があります。これは、「はい」として割り当てるとangularになり、値としてではなく式として評価されるためです。入力要素は次のようになります。

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

私はionicで作業していましたが、次のように動作します。

<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

これを使用する：（リアクティブフォームアプローチの場合）

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

null：falseおよびtrue/''：trueの場合

0
Abhishek Gautam

更新された実行中のコードとパンカーです。

更新プランカー

@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