Lenny Kamande
Lenny Kamande

Reputation: 91

Custom Angular Validation based on a selection radio select button

I need some help in that i have validation working partially. When one selects a payment method called CC the user input needs validation to kick in instantly and wont allow one to input the wrong number or be able to pay(the button will be disabled). My issue is that validation isn't working in that when i input the first number is turns the button on and validation isn't working and i have used this resource as well Validation based on user input.

Here is my html/angular code:

<label for="phone_number" class="fund-project-personal-details-label">Phone Number</label>
                            <input placeholder="Phone Number" id="phone_number" type="text" ng-model="phone_number" ng-required="selected_payment_method === 'CC'"
                            ng-pattern="phoneNumberPattern">
 <button type="submit"
                                        class="waves-effect waves-light btn-large orange white-text proceed-payment"
                                        ng-disabled="selected_payment_method == undefined || paymentForm.$invalid || selected_reward_total_amount == 0">
                                    Next: Pay
                                    <i class="fa fa-chevron-right" ng-if="!proccess_payment_spinner"></i>
                                    <div class="preloader-wrapper small active right payment-loader" ng-if="proccess_payment_spinner">
                                        <div class="spinner-layer spinner-white-only">
                                            <div class="circle-clipper left">
                                                <div class="circle"></div>
                                            </div>
                                            <div class="gap-patch">
                                                <div class="circle"></div>
                                            </div>
                                            <div class="circle-clipper right">
                                                <div class="circle"></div>
                                            </div>
                                        </div>
                                    </div>
                                </button>

This is my JS code:

$scope.phoneNumberPattern = (function() {
        let regexp = /^[07]{10,10}$/;
        let requireNumber = "selected_payment_method === 'MPESA'"
        return {
            test: function(value) {
                if( $scope.requireNumber === true)  {
                    return true;
                }
                return regexp.test(vlue);
            }
        };
    })();

Upvotes: 0

Views: 69

Answers (0)

Related Questions