如何在 html 表单中使用 Angular Material 单选按钮答案

【问题标题】：How to use Angular Material radiobuttons in a html form如何在 html 表单中使用 Angular Material 单选按钮
【发布时间】：2016-09-16 20:09:07
【问题描述】：

我正在尝试使用 AngularJS Material 作为我的前端框架，目前我只有一个简单的表单，其中包含三个文本输入字段和一个单选按钮组。在我添加角度材料之前一切正常，现在只提交文本输入。

<form name="projectForm" action="../nameServlet" method="post">
    <md-input-container class="md-block">
        <label>First Name</label>
        <input name="first-name" required ng-model="project.firstName">
        <div ng-messages="projectFrom.firstName.$error">
            <div ng-messages="required">This is required</div>
        </div>
    </md-input-container>
    <br/>

    <md-input-container class="md-block">
        <label>Last Name</label>
        <input name="last-name" required ng-model="project.lastName">
        <div ng-messages="projectFrom.lastName.$error">
            <div ng-messages="required">This is required</div>
        </div>
    </md-input-container>
    <br/>

    <label>Gender</label>
    <md-input-container class="md-block">
        <md-radio-group ng-model="data.group1">
            <md-radio-button name="gender" value="Male"   required> Male</md-radio-button><br>
            <md-radio-button name="gender" value="Female" required> Female</md-radio-button>
        </md-radio-group>
    </md-input-container>
    <br>

<!--    <input type="radio" name="gender" value="male"   required> Male  <br> -->
<!--    <input type="radio" name="gender" value="female" required> Female<br> -->

    <md-input-container class="md-block">
        <label for="region">Region</label>
        <input name="region" required ng-model="project.region">
        <div ng-messages="projectFrom.region.$error">
            <div ng-messages="required">This is required</div>
        </div>
    </md-input-container>
    <br/>

    <input name="submit" type="submit" value="Submit"/>
</form>

还有我的 app.js

var app = angular.module('nameApp', ['ngMaterial', 'ngMessages']);

app.controller('ToolbarController', function($scope) {
    $scope.title = 'Enter your name!';
});

【问题讨论】：

您的标记没问题 - codepen.io/camden-kid/pen/zKxZLO。单击“设置”按钮并检查您的 CSS 和 JS 是否与显示的匹配。
我只是缺少 svg-assests-cache 和 ngDialog 但这些似乎并不重要。即使添加了它们，它仍然无法正常工作
控制台有错误吗？
是的，但该错误是 Java servlet 代码中的空指针错误，因为使用此表单提交时 request.getParameterValues("gender")[0] 没有值。
对不起，我看错了实际问题！ ng-model="data.group1" 应该是 ng-model="project.group1" 吗？

标签： javascript angularjs html angular-material

【解决方案1】：

尝试这样的事情；）（运行代码 sn-p）

在您的情况下，将 ng-model='data.group1' 替换为 ng-model='project.group1'，将所有 ng-message 替换为 ng-message='projectForm.nameInput.$error'

<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.submit = function(obj) {
                    // submit code goes here
                    console.log(obj);
                };
            });
    </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>First Name</label>
                    <input name="firstName" id="firstName" ng-model="obj.firstName" ng-required="true">
                    <div ng-messages="myForm.firstName.$error">
                        <div ng-message="required">This is required</div>
                    </div>
                </md-input-container>
            </div>
          <div class="col-xs-8">
                <md-input-container>
                    <label>Name</label>
                    <input name="lastName" id="lastName" ng-model="obj.lastName" ng-required="true">
                    <div ng-messages="myForm.lastName.$error">
                        <div ng-message="required">This is required</div>
                    </div>
                </md-input-container>
            </div>
    
            <div class="col-xs-8">
                <md-input-container>
                    <md-radio-group name="gender" id="gender" ng-model="obj.gender" ng-required="true" class="">
                        <md-radio-button name="gender" value="Male"   required> Male</md-radio-button><br>
            <md-radio-button name="gender" value="Female" required> Female</md-radio-button>
                    </md-radio-group>
                    <div ng-messages="myForm.gender.$error">
                        <div ng-message="required">This is required</div>
                    </div>
                </md-input-container>
            </div>
        </div>
      <div class="col-xs-8">
                <md-input-container>
                    <label>Region</label>
                    <input name="region" id="region" ng-model="obj.region" ng-required="true">
                    <div ng-messages="myForm.region.$error">
                        <div ng-message="required">This is required</div>
                    </div>
                </md-input-container>
            </div>
        <md-button class="md-primary" type="submit" ng-disabled="myForm.$invalid">SUBMIT</md-button>
    </form>
</body>

</html>

【讨论】：