文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在html表单中使用角度材质单选按钮

问如何在html表单中使用角度材质单选按钮
EN

Stack Overflow用户

提问于 2016-09-06 21:35:59

回答 1查看 1.7K关注 0票数 0

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

<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!';
});

javascript

angularjs

html

angular-material

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-09-16 20:09:08

尝试类似这样的操作;) (运行代码片段)

在您的示例中，将ng-model='data.group1‘替换为ng-model='project.group1'，将all 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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39350402

复制

相似问题

问如何在html表单中使用角度材质单选按钮
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在html表单中使用角度材质单选按钮EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在html表单中使用角度材质单选按钮
EN