AngularJS Formly Forms - How to Make Radio Buttons Required

0
votes

I've been looking through the formly forms documentation, as well as through SO, but I cannot determine if the below is possible. Has anyone encountered a solution?

Issue: How does one configure Formly Form radio button questions to be required?

Background: I have an API that is returning formly form questions to the front end. For example, I might get the below back: enter image description here

Both of those fields are 'required' in the DB. If I don't key in an answer to 'What's your blog URL?', I get a little 'Field is required!' message. Awesome.

But if I don't fill out that radio button, I get no such message. The form just hangs when I click 'Confirm'.

Any idea how get the 'This form is required!' message with the radio question? Again, these questions are not hard-coded, so it's not as simple as adding an option to the HTML.

Yes, I have tried using required: true. Works great with select, but does not seem to work with radio buttons.Trying this:

formlyConfigProvider.setType([{
name: 'radio',
templateUrl: "radioTemplate.html",
wrapper: ['simpleLabel', 'errorMessage'],
defaultOptions: {
  noFormControl: false
},
apiCheck: function apiCheck(check) {
  return {
    templateOptions: {
      required: true,
      options: check.arrayOf(check.object),
      labelProp: check.string.optional,
      valueProp: check.string.optional
    }
  };
},
controller: ['$scope', 'HelpersService', function($scope, HelpersService) {
  if (['Internet Explorer', 'MSIE', 'Unknown', 'Edge'].indexOf(HelpersService.getBrowserName().name) > -1) {
    $scope.ieClass = 'ie';
  }
}]

}]);

I get the following error:

enter image description here

This led me to believe this is not an option with radio buttons. However, if I'm interpreting this error incorrectly, please let me know! :)

Someone requested a code sample. A lot of code in the codebase is proprietary; however, I have included below the template I use for the questions that come back from the DB. What I'm really curious about is if anyone has encountered this issue before, and if there's a documented config option to get around it, or a very straightforward hack. Otherwise, I'll look into detecting this with a function in the controller.

****Not all questions that come back from the DB will be required!!!

<div ng-if="ctrl.questions">
    <form name="ctrl.form" ng-submit="ctrl.submit(ctrl.questions.model)" novalidate>
        <formly-form form="ctrl.form" class="input" fields="ctrl.questions" model="ctrl.questions.model" >
            <input type="submit" class="btn" id="submit" value="Confirm" />
        </formly-form>
    </form>
</div>
3
javascriptangularjsformsangular-formly

3 Answers

0
votes

Add the required in the radio button:

<input type="radio" name="myRadio" required ng-model="myModel" value="myValue"/>

Then you can use the ng-disabled to check if the radio is selected:

<input type="button" ng-click="action()" value="Next" ng-disabled="myform.myRadio.$invalid" />
0
votes

use ng-required to validate the checkbox like this 

<div ng-app="app" ng-controller="ctrl">
     <form name="myForm" ng-submit="submit()"  >
       <input type="radio" ng-model="roommate" value="roommate" ng-required="!roommate">  roommate <br/>
        <button type="submit">Submit</button>
      </form>
</div>

Demo

0
votes

easily...you add required: true in the templateOptions. There is also an option for disabled as well. Did you even bother looking at any of the examples on the site? This would have been easily found by doing so

{
  key: 'radiobutton1',
  templateOptions: {
      required: true,
      label: 'Please make a selection',
      options: [{value: 'Steak', id: 'steak'}, {value: 'Lobster', id: 'lobster'}]
  }
}