Question

我正在使用Angular Material，我需要制作一个无线电组，以便用户在提交表单之前必须选择一个单选按钮。因此，在没有选择单选按钮的情况下，表单应无效。

这是代码

<form id="pipelineForm" name="pipelineForm" ng-submit="processForm()" flex layout="column" novalidate>
    <md-radio-group ng-model="parameters.selected" ng-required="true" name="analyzerRG" 
              <md-radio-button ng-value="choiceObj" ng-repeat="choiceObj in parameters.choices" ng-required>
              {{choiceObj.text}}
              </md-radio-button>
    </md-radio-group>
</form>

我尝试过要求个人<md-radio-button>，将name提供给广播组，并将ng-messages用于required，但无济于事。当我检查chrome元素检查器中的md-radio-group时，它始终具有class="ng-valid ng-valid-required"。

我可以检查parameters.selected属性以自行验证表单，但我想如果正确的类应用于md-radio-group，那么表单将自动失效。

P.S。：Angular Material Github上有一个类似的问题，但它现在似乎已经关闭，这些建议对我来说似乎不起作用。

Answer 1

关于缺少ng-messages，我不是100％肯定，但我认为这归结为ng-messages不知道自定义控件，如md-radio-group / md-radio-button。这是一种更新的方法，它使用附加到同一模型值的模糊文本字段。这允许消息按预期显示。

请注意，ng-submit已添加到此处的表单元素中，以阻止浏览器本机表单验证。而不是禁用提交按钮（这可防止显示任何消息，因为无法显示触发表单验证），myForm.$valid表达式现在在调用submit方法之前检查<html lang="en"> <head> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <script language="javascript"> angular .module('firstApplication', ['ngAnimate', 'ngAria', 'ngMaterial', 'ngMessages']) .controller('myController', function($scope) { $scope.statuses = ['Planned', 'Confirmed', 'Cancelled']; $scope.options = ['Option 1', 'Option 2', 'Option 3', 'Option 4', '...']; $scope.submit = function(obj) { // submit code goes here console.log(obj); }; $scope.reset = function() { $scope.obj = { status: "" } } $scope.reset(); }); </script> </head> <body ng-app="firstApplication"> <form name="myForm" ng-app="myApp" ng-controller="myController" class="container-fluid" ng-submit="myForm.$valid && submit(obj)" novalidate> <div class="row"> <div class="col-xs-8"> <md-input-container> <md-radio-group id="status" ng-model="obj.status" class=""> <md-radio-button ng-repeat="s in statuses" ng-value="s">{{s}}</md-radio-button> </md-radio-group> <input type="text" ng-model="obj.status" name="status" style="max-height:0; opacity: 0; border: none" ng-required="true" aria-label="Status"> <div ng-messages="myForm.status.$error" role="alert"> <div ng-message="required">Status is required.</div> </div> </md-input-container> </div> </div> <md-button type="button" ng-click="reset()">RESET</md-button> <md-button class="md-primary" type="submit">SUBMIT</md-button> </form> </body> </html>。

＆＃13;

date = '2018-03-16';
$weekend = false;
$day = date("D", strtotime($date));
if($day == 'Sat' || $day == 'Sun'){
    $weekend = true;
}
if($weekend){
    echo $date . ' It is a weekend';
} else{
    echo $date . ' It is not a weekend';
}

＆＃13;

Answer 2

检查问题线程

中提到的CodePen（https://codepen.io/jakobadam/pen/xqZoBR）上的解决方案

https://github.com/angular/material/issues/1305#issuecomment-350047026

<md-input-container class="md-input-has-value" 
       ng-class="{ 'md-input-invalid' : form.fruit.$invalid && form.$submitted }">
  <label class="md-required" translate>Fruit</label>

  <md-radio-group md-autofocus name="fruit" ng-model="fruit" layout="row" required>
    <md-radio-button value="Apple" class="md-primary">Apple</md-radio-button>
    <md-radio-button value="Banana"> Banana </md-radio-button>
    <md-radio-button value="Mango">Mango</md-radio-button>  
  </md-radio-group>

  <div ng-messages="form.fruit.$error">
    <div ng-message="required" translate>Yo. Select some fruit.</div>
  </div>
</md-input-container>

Answer 3

我尝试禁用材质有效的角色（在您的情况下尝试删除＆＃39;无效并且在您的表单应用程序中归属）

段：

＆＃13;

<html lang="en">

<head>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <script language="javascript">
        angular
            .module('firstApplication', ['ngAnimate', 'ngAria', 'ngMaterial', 'ngMessages'])
            .controller('myController', function($scope) {
                $scope.statuses = ['Planned', 'Confirmed', 'Cancelled'];
                $scope.options = ['Option 1', 'Option 2', 'Option 3', 'Option 4', '...'];
                $scope.submit = function(obj) {
                    // submit code goes here
                    console.log(obj);
                };
                $scope.reset = function() {
                    $scope.obj = {
                        name: "",
                        myselect: "",
                        status: ""
                    }
                }
                $scope.reset();
            });
    </script>
</head>

<body ng-app="firstApplication">

    <form name="myForm" ng-app="myApp" ng-controller="myController" class="container-fluid" ng-submit="submit(obj)">
        <div class="row">
            <div class="col-xs-8">
                <md-input-container>
                    <label>Name</label>
                    <input name="name" id="name" ng-model="obj.name" ng-required="true">
                    <div ng-messages="myForm.name.$error">
                        <div ng-message="required">Campaign Name is required.</div>
                    </div>
                </md-input-container>
            </div>
            <div class="col-xs-8">
                <md-input-container>
                    <md-select name="myselect" id="myselect" placeholder="myselect" ng-model="obj.myselect" ng-required="true">
                        <md-option ng-repeat="o in options" ng-value="o">{{o}}</md-option>
                    </md-select>
                    <div ng-messages="myForm.myselect.$error">
                        <div ng-message="required">myselect is required.</div>
                    </div>
                </md-input-container>
            </div>
            <div class="col-xs-8">
                <md-input-container>
                    <md-radio-group name="status" id="status" ng-model="obj.status" ng-required="true" class="">
                        <md-radio-button ng-repeat="s in statuses" ng-value="s">{{s}}</md-radio-button>
                    </md-radio-group>
                    <div ng-messages="myForm.status.$error">
                        <div ng-message="required">myselect is required.</div>
                    </div>
                </md-input-container>
            </div>
        </div>
        <md-button type="button" ng-click="reset()">RESET</md-button>
        <md-button class="md-primary" type="submit" ng-disabled="myForm.$invalid">SUBMIT</md-button>
    </form>
</body>

</html>

＆＃13;

角度材料：需要一个md-radio-group

3 个答案: