Breaking a form between multiple tabs in angular breaks validation

前端 未结 2 1214
别跟我提以往
别跟我提以往 2021-02-06 03:35

I have an angular form spitted between several tabs with angular UI directive.

2条回答
  •  旧巷少年郎
    2021-02-06 03:56

    Although it is old post, but i thought it would help someone

    
        
        
    
    

    I added a nested controllers in PARAM_1.html and PARAM_2.html with form names as firstForm and secondForm.

    In the controller code of firstForm and secondForm i placed a watcher function as below

    $scope.$watch('secondForm.$valid', function(newVal) {
            //$scope.valid = newVal;
            var isPristine = $scope.secondForm.$pristine;
            var isDirty =   $scope.secondForm.$dirty;
            console.log('secondForm Form isDirty'+isDirty); 
            //console.log('firstForm isPristine '+isPristine);
    
            if($scope.secondForm.$valid==true){
    
    
                if(isPristine==true){
                    console.log('secondForm Form is PRISTINE now '+$scope.secondForm.$valid);   
    
                    //CHECK IF DIRTY IS TRUE HERE
                    if(isDirty==true){
                        console.log('secondForm Form is isDirty TRUE NOW>>DECREMENT');
                    }
                } else {
                    //
                    isFormValidated =   true;
                    console.log('secondForm IS COMPLETED NOW'+$scope.secondForm.$valid);
                    $scope.setValidationCount();
                }               
                //console.log('secondForm Form is valid now '+$scope.secondForm.$valid);    
            } else {
    
                //HERE IS THE PLACE
                if(isFormValidated==true){
                    isFormValidated =   false;
                    console.log('secondForm INVALIDATING FORM NOW');
                    $scope.decrementValidationCount();
                }
    
            }
    

    Above piece of code is placed in nested controller for firstForm and secondForm. This piece can detect if form has been validated or not. It informs main form (myForm).

    With this you can control the enable and disable or buttons on main form till all the sub forms are validated successfully.

    Note : setValidationCount and decrementValidationCount are two methods in main controller which controls the enabling and disabling of BUTTONS on main form.

提交回复
热议问题