service portal widget mandatory

[Jen11]

I am trying to make a radio button mandatory, below is the script I have, but I an still able to submit the form with one of the radio button checked.  How can I make it mandatory??

</div>
<div class="custom-control custom-radio radio-inline">
<input type="radio" class="custom-control-input" id="registration_preferred_email" name="registration_preferred_email" value="Alternate E-Mail Address" ng-model="c.registration_preferred_email">
<label class="custom-control-label" for="registration_preferred_email">Alternate E-Mail Address</label>
</div>

</div>
</div>

<!-- Please RSVP -->

<div class="container">
<div class="form-row">
<div class="form-group col-md-12 required"
ng-if="c.registration_mcemployee === 'Yes'|| c.registration_mcemployee === 'No'"
ng-class="{ 'has-error' : mcexperiencedr.registration_rsvp.$invalid && c.submitted }"
ng-required="true"
>

<label class="control-label" for="registration_rsvp"><span style="padding-right: .25em; color:red" title="Mandatory" class="fa fa-asterisk mandatory" ></span>Please RSVP</label>
<p>
</p>

<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="registration_rsvp" name="registration_rsvp" value="Yes, I would like to attend The MemorialCare Experience Physician Event" ng-model="c.registration_rsvp">
<label class="custom-control-label" ng-mandatory="true" for="registration_rsvp">Yes, I would like to attend the MemorialCare Experience Physician event on Oct 3</label>
</div>

<div class="form-group col-md-12 required"
ng-if="c.registration_mcemployee === 'Yes'|| c.registration_mcemployee === 'No'"
ng-class="{ 'has-error' : mcexperiencedr.registration_rsvp.$invalid && c.submitted }"
ng-required="true">
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="registration_rsvp" name="registration_rsvp" value="No, I am not able to attend The MemorialCare Experience Physician Event" ng-model="c.registration_rsvp">
<label class="custom-control-label" for="registration_rsvp">No, I am not able to attend the MemorialCare Experience Physician event on Oct 3</label>

</div>

[SatheeshKumar · Accepted solution]

try ng-required="true"

the below link will be helpful for you:

https://www.w3schools.com/angular/tryit.asp?filename=try_ng_ng-required

https://community.servicenow.com/community?id=community_question&sys_id=52616c25db2ce7805ed4a851ca96...

[Harish KM]

Sample below

HTML

<div class="col-xs-12 col-md-6" style="padding-left: 10px;"> <!--padding-top: 70px;"-->
<span><span ng-class="{'not-populated': (!c.data.vendor && !c.data.customer)}" class="required-marker fa fa-asterisk"></span> ${Please Select Your Relationship}</span>
<div class="radio">
<label>
<input id="vendor" type="radio" ng-model="c.data.vendor" name="customerType" value="vendor" ng-true-value="Vendor" ng-false-value="false" ng-click="c.toggleVendor()">
${Vendor}
</label>
</div>

Client script

var relation;

c.toggleVendor = function(){
relation = 'vendor';
if(c.data.vendor == 'vendor'){
alert("Please complete one of the four fields below");
return;
}
};

if(relation == 'vendor'){
if((!c.data.vcnumber) && (!c.data.invnumber) && (!c.data.ponumber) && (!c.data.payamount)){
alert("Please complete one of the four vendor related fields");
return;
}

}