Как использовать радиокнопки Angular Material в формате HTML

0

Я пытаюсь использовать 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!';
});
  • 0
    Ваша разметка в порядке - codepen.io/camden-kid/pen/zKxZLO . Нажмите кнопку «Настройки» и убедитесь, что CSS и JS соответствуют указанным.
  • 0
    Мне не хватает только svg-assests-cache и ngDialog, но они не кажутся необходимыми. И даже после добавления их все равно не работает
Показать ещё 5 комментариев
Теги:
angular-material

1 ответ

1
Лучший ответ

Попробуйте что-то вроде этого:) (пропустить фрагмент кода)

В вашем случае замените ng-model = 'data.group1' на ng-model = 'project.group1', все ng-сообщение на 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>
Поделиться
  • 0
    Спасибо большое, это, кажется, работает отлично!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню