AngularJS Formly Forms - 如何制作单选按钮

Question

我一直在查看形式表单文档以及SO，但我无法确定以下是否可行。有没有人遇到过解决方案？

问题：如何配置Formly Form单选按钮问题？

背景：我有一个API，它将形式问题返回到前端。例如，我可能会得到以下回复：

这两个字段在数据库中都是“必需的”。如果我没有输入“你的博客网址是什么？”的答案，我会得到一些“字段是必需的！”信息。真棒。

但如果我没有填写那个单选按钮，我就得不到这样的消息。单击“确认”时，表单就会挂起。

知道如何获得'此表格是必需的！'消息与广播问题？同样，这些问题不是硬编码的，因此它不像在HTML中添加选项那么简单。

是的，我尝试过使用required：true。使用select非常适合，但似乎无法使用单选按钮。请注意：

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';
  }
}]

}]）;

我收到以下错误：

这让我相信这不是单选按钮的选项。但是，如果我错误地解释了这个错误，请告诉我！ ：）

有人要求提供代码示例。代码库中的许多代码都是专有的;但是，我在下面包含了我用于从DB返回的问题的模板。我真正好奇的是，如果有人之前遇到过这个问题，并且有一个记录的配置选项可以绕过它，或者是一个非常简单的黑客攻击。否则，我将考虑使用控制器中的函数来检测它。

****并非所有从DB回来的问题都需要!!!

<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>

Answer 1

在单选按钮中添加required：

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

然后您可以使用禁用ng来检查是否选择了收音机：

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

Answer 2

使用ng-required来验证此复选框

<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

Answer 3

很容易......你在templateOptions中添加required：true。还有一个残疾人选择。你有没有看过网站上的任何例子？这样做很容易找到

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