mardi 1 décembre 2015

Angular Form validation to show error message

I have a form, where i wanted to show inline error message when none of the checkbox is selected. But i'am not able to show the message for the following condition

I have a form with two radio options - No, Yes. When user chooses yes, he have a option to choose values from a list of checkboxes. When the user chooses Yes radio button, he is supposed to choose at least one checkbox or else an error message should be displayed prompting the user to choose at least with one checkbox value. If radio option is No, no checkbox selection is required. How would i achieve this using angular form validation ?

 <p ng-if="noCheckboxSlected" class="form-error"><img src="images/icon-error.png" alt=""/>Sorry, please select a option.</p>
        <form name="answersToQuestions">
        <div class="ice-form-radio">
             <input type="radio" name="mpq{{allergies.questionId}}" ng-model="allergies.answer" ng-click="setQuestion(false)" value="no">
             <label for="mpq{{allergies.questionId}}no"><span>No </span></label>
        </div>
            <div class="ice-form-radio">
                <input type="radio" name="mpq{{questionId}}"  ng-model="allergies.answer" value="yes" ng-click="setCondition(true)"/>
                <label for="mpq{{questionId}}yes"><span>Yes</span></label>
            </div>
            <table>
                <tr ng-repeat="(key, allergyList) in  filteredAllergies track by $index">
                    <td ng-repeat="allergy in allergyList track by $index">
                        <div class="ice-form-checkbox">
                            <input id="condition-{{allergy.allergyCode}}" ng-model="allergy.allergyIndicator" type="checkbox" />
                            <label for="condition-{{allergy.allergyCode}}"><span>{{allergy.allergyName}}</span></label>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
        </form>

Thanks




Aucun commentaire:

Enregistrer un commentaire