1. ホーム
  2. javascript

ラジオボタンの検証 AngularJS

2023-09-08 18:22:10

質問

これはかなり簡単なことのように思えますが、私は答えを見つけることができません。 私は、ラジオグループから選択されたことを検証する必要があるフォームを持っています。 ラジオ ボタンに「必須」属性を使用してみましたが、すべてのラジオ ボタンが選択されていない限り (これは設計上不可能です)、フォームが検証されると文句を言われます。

AngularJSでラジオグループの選択を検証する適切な方法は何ですか?

<form name="myForm" ng-submit="submitForm()" ng-controller="ExampleController">
  <input type="radio" ng-model="color" value="red" required>  Red <br/>
  <input type="radio" ng-model="color" value="green" required> Green <br/>
  <input type="radio" ng-model="color" value="blue" required> Blue <br/>
  <tt>color = {{color | json}}</tt><br/>
  <button type="submit">Submit</button>
</form>

Plnkrの送信ボタンをクリックすると、動作が表示されます。

http://plnkr.co/edit/3qcIbMvJk19OvokcHe2N?p=preview

どのように解決するのですか?

以下のように ng-required="!color" . これにより、値が設定されていないときのみフィールドが必須となるようにします。値が設定されている場合は、requiredが削除され、バリデーションを通過するようになります。

<input type="radio" ng-model="color" value="red" ng-required="!color">  Red <br/>
<input type="radio" ng-model="color" value="green" ng-required="!color"> Green <br/>
<input type="radio" ng-model="color" value="blue" ng-required="!color"> Blue <br/>

以下は、フォームが正しくバリデートされることを示す、更新されたプランカーです。 http://plnkr.co/edit/EdItU2IIkO1KIsC052Xx?p=preview

更新情報

e-cloudの 回答 はシンプルで、追加のディレクティブを必要としません。可能であれば、その方法を使用することをお勧めします。この回答は動作するソリューションを提供し、ng-requiredディレクティブの使用を実証しているので、ここに残します。