How to set AngularJS form validation in table

Question

I have a table having some fields, I want to submit that table to database, but I want them to be validated to be required, therefore I put the table into a form and trying to validate them

form to be validated (required only):

<form id="trip-send-form">

    <!--some field , this field is validated to be required successfully-->
    <input type="text" 

    <!--but the fields here, are not being set to be required-->
    <table>
        <tbody ng-repeat="item in items">
            <tr>

                <td><input type="checkbox" ng-model="item.setRequired"</td>
                <td><input type="text" ng-model="name" ng-required="item.setRequired" /></td>

            </tr>
        </tbody>
    </table>

    <input type="submit"/>

</form>

controller:

$('#send-trip-form').validator({
    focus: false,
    feedback: {
       success: 'fa fa-ok',
       error: 'fa fa-remove'
    }
})
$('#send-trip-form').validator().on('submit', function(e) {
    if (e.isDefaultPrevented()) {
        console.log( "error" );
    } else {
        console.log( "success" );
    }
})

I am waiting for your kind response.

Thanks.

Answer 1

No need of jQuery to use form validation, you can learn a lot about angularjs form validation here

Here is a fiddle

You can see your first input which is required:

<input type="text" ng-model="myModel" required />

And under you can see the list of items initialized in controller and which validation is done dynamically:

<tr ng-repeat="item in items">
    <td><input type="checkbox" ng-model="item.setRequired"</td>
    <td><input type="text" ng-model="name" ng-required="item.setRequired" /></td>
</tr>

Controller initialization:

$scope.items =[
    {setRequired: false},
    {setRequired: true}
]; 

And then the submit button which use the form validators:

<input type="submit" ng-disabled="myForm.$invalid"/>

myForm is the name of the form (<form id="trip-send-form" name="myForm" ng-submit="submitted()">), it is required to use the validators.

The function submitted() will be called on submit, it is a function that is defined in the controller aswell.

jQuery and Angularjs are two different things, you should be able to avoid using jQuery 99% of the time when using angularjs.