Adding Required in input field AngularJS

Question

I have used <required> inside <input>.Also I tried using ng-required="true". But the modal closes itself even if the required field is left empty. Whenever this modal closes,

Please fill out this fielld

shows up but modal gets dismissed even with blank input fields. See this plunk

How do I make sure that the form is filled completely before this form is submitted.

Answer 1

The required and ng-required attributes only affect the validity of a form. If you want to prevent your modal buttons from working you'll need to hook up the form's state to something like ng-disabled. Check this plunker: http://plnkr.co/edit/ru4uqgpcWKyGwCFfZPoO?p=preview

You'll see that I wrapped your modal body in a form named "eventForm", and added ng-disabled="eventForm.$invalid" to your "OK" button.

You can read more about forms in Angular here: http://docs.angularjs.org/guide/forms