AngularJs validator with a form of many dynamically created inputs

Question

I'm trying to create a form of many rows of inputs using ng repeat. Each row has many inputs, with the values the user enters for each row adding up to the a value specific to each row e.g

Value = 20 input 1 = 10, input 2 = 10, Value = 24 input 1 = 14, input 2 = 10,

From here the user can only submit the form if each line is fully completed and correct. Therefore i want to use ng-show="entireForm.$valid" to display the submit button.

Is this possible? I have been stuck on this problem for a number of days and am completely confused as I am new Angular. As of the minute I have created the view and setup the validator with no logic inside. Due to the amount of opinion out there I'm unsure if this is even possible with ng-repeat

MM.app.directive('lineitemvalidator', function() {

return {
    require: 'ngModel',
    restrict: 'A',
    link: function(scope, elm, attrs, ctrl) {
        ctrl.$validators.lineItemValidator = function(modelValue,viewValue) {

            var totalInputHrs = parseFloat(scope.childForm.bill.$viewValue) + parseFloat(scope.childForm.drawDown.$viewValue)
             + parseFloat(scope.childForm.carryForward.$viewValue) + parseFloat(scope.childForm.writeOff.$viewValue) + parseFloat(scope.childForm.roundUp.$viewValue);


             if((totalInputHrs==parseFloat(scope.lineItem.billableTime))){

                 /*scope.childForm.bill.$valid=true;
                 scope.childForm.drawDown.$valid=true;
                 scope.childForm.carryForward.$valid=true;
                 scope.childForm.writeOff.$valid=true;
                 scope.childForm.roundUp.$valid=true;

                 scope.childForm.drawDown.$setValidity("drawDown", true);
                 scope.childForm.bill.$setValidity("bill", true);
                 scope.childForm.carryForward.$setValidity("carryForward", true);
                 scope.childForm.writeOff.$setValidity("writeOff", true);
                 scope.childForm.roundUp.$setValidity("roundUp", true);

                 scope.childForm.$setValidity("childForm",true,scope.childForm);
                  */
                 console.log("Form valid should = true");
                 console.log(scope.childForm);
                 return true;
                 console.log("Form valid = "+scope.childForm.$valid);
             }else{
                 /*scope.childForm.bill.$valid=false;
                 scope.childForm.drawDown.$valid=false;
                 scope.childForm.carryForward.$valid=false;
                 scope.childForm.writeOff.$valid=false;
                 scope.childForm.roundUp.$valid=false;
                 scope.childForm.drawDown.$setValidity("drawDown", false);
                 scope.childForm.bill.$setValidity("bill", false);
                 scope.childForm.carryForward.$setValidity("carryForward", false);
                 scope.childForm.writeOff.$setValidity("writeOff", false);
                 scope.childForm.roundUp.$setValidity("roundUp", false);

                 scope.childForm.$setValidity("childForm",true,scope.childForm);
                  */
                 console.log("Form valid = "+scope.childForm.$valid);
                 return false;
                 console.log("Form valid = "+scope.childForm.$valid);
             }
        }
    }
};

Chandermani · Accepted Answer · 2014-12-03 11:20:11Z

2

You will have to use ng-form for this scenario. Each form will have some input and validations specific to its input fields. The parent form get automatically marked as $valid or $invalid if any of the child form validation fails.

The setup would look something like this:

<form name='entireForm'>\
   <ng-form name='formChild' ng-repeat='item in items'>
       <input name='input1' ng-model='item.field1'/>
       <input name='input2' ng-model='item.field2'/>
   </ng-form>
</form>

Each ng-form can be validated individually and the overall state of the form entireForm is valid only when all children are valid.

answered Dec 3, 2014 at 11:20

Chandermani

42.7k12 gold badges87 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

user3240957 Over a year ago

The only issue is I am trying to create a table therefore each row is a member of the ng-repeat e.g <tr ng-repeat="lineItem in data" novalidate>. I am not allowed to use inside ng-form inside. Is there a workaround?

user3240957 Over a year ago

Also how I access elements specific to the child form. For example input 2 is child form 1, I want to access input 2 also to check its value? @Chandermani

Chandermani Over a year ago

Yes, you will have issues with table, maybe you can look at bootstrap grid based layout.

Chandermani Over a year ago

Depends upon where you want to access. The controller for the ng-model is available at formChild.input2, which you can use to get the view value and validate the view, but it is available within the ng-repeat scope only.

Chandermani Over a year ago

Remember is there is no validation error the value of item.field2 will match the input2 value, so you always have access to it.

|

Collectives™ on Stack Overflow

AngularJs validator with a form of many dynamically created inputs

1 Answer 1

9 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Related