Make input required upon clicking specific radio button - html

Question

I need to make a specific input field required based on the choice of a specific radio button. I have tried ng-required but doesn't seem to work.
I want to make the phone number field required if one chooses the payment method4 with the model ng-model="selected_payment_method=CC
<form ng-submit="proceed_payment()" type="post" name="paymentForm" novalidate>
<div class="col s12">
<div class="col s12">
<input name="payment" ng-model="selected_cc_method" class="with-gap" id="payment4" type="radio"
value="CC" ng-click="selected_payment_method = 'CC'"/>
<label class="fund-project-payment-method-label" for="payment4">CC</label>
</div>
</div>
</div>
<div class="col s12 shipping-details">
<div class="fund-project-additional fund-project-personal-details">
Personal Details
</div>
<label for="email" class="fund-project-personal-details-label">Email</label>
<input placeholder="Email" id="email" type="email" ng-model="email" class="validate" required>
<!--
Phone Number & Name a required field as well
-->
<label for="display_name" class="fund-project-personal-details-label">Name</label>
<input placeholder="Name" id="display_name" ng-model="name" type="text"
class="validate" required>
<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'">
<input placeholder="Your message." id="personal_message" ng-model="personal_message" type="text"
class="validate" maxlength="200">
<span class="personal-message-text">
This will be displayed on the campaign page.
</span>
</div>
<div class="col s12 right">
<button type="submit" class="waves-effect waves-light btn-large orange white-text proceed-payment"
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 what I have done on the angular side to make sure payment is done.
What am I not doing right?
$scope.proceed_payment = function () {
$scope.proccess_payment_spinner = true;
if ($scope)
var payment_method = $('input:radio[name=payment]:checked').val();
if ($scope.selected_reward_details.limit_reward_amount &&
parseInt($scope.selected_reward_details.selected_quantity) > parseInt($scope.selected_reward_details.remaining_quantity)) {
$('#heading').html("Too many rewards!");
$('#message').html("Unfortunately the amount of rewards you've selected exceeds the number available.");
$('#error_modal').openModal();
return;
}
if (payment_method === "CC") {
ProjectPaymentService.initiateCCPayment(
$scope.project.id,
$scope.selected_reward_details.id,
$('#email').val(),
$('#display_name').val(),
$('#phone_number').val(),
$('#personal_message_display_name').val(),
$('#personal_message').val(),
parseInt($scope.selected_reward_details.selected_quantity),
parseFloat($scope.selected_reward_details.custom_amount),
parseFloat($scope.selected_reward_details.shipping_fee),
parseFloat($scope.selected_reward_details.reward_amount * $scope.selected_reward_details.selected_quantity),
parseFloat($scope.selected_reward_total_amount),
$('#address_1').val(),
$('#address_2').val(),
$('#country').val(),
$('#postcode').val(),
$('#city').val(),
$('#region').val()
).then(
function successHandler(data) {
$scope.proccess_payment_spinner = false;
var project_funding_id = angular.fromJson(data.data);
$location.path("mpesa_details/" + project_funding_id);
},
function errorHandler(data) {
$scope.proccess_payment_spinner = false;
console.log(angular.fromJson(data.data));
});

Answer 1

Radio type input does not need ng-click to set its value:
<input type="radio" name="payment" ng-model="selected_cc_method"
class="with-gap" id="payment4" value="CC" />
Now you can use selected_cc_method with ng-required:
<input placeholder="Phone Number" id="phone_number" type="text"
ng-model="phone_number" ng-required="selected_cc_method === 'CC'">
You can see here that when radio button is clicked, phone number input becomes required:
DEMO

Answer 2

You have two variables you are working with;
selected_cc_method
and
selected_payment_method
I would drop the ng-click and set the model of the radio and use the radio button value for the ng-required instead of trying to use another variable for this.
<input name="payment" ng-model="selected_payment_method" class="with-gap"
id="payment4" type="radio" value="CC"/>
<label class="fund-project-payment-method-label" for="payment4">CC</label>
<input placeholder="Phone Number" id="phone_number" type="text"
ng-model="phone_number"
ng-required="selected_payment_method === 'CC'">