CODEWITHSUNDEEP
javascriptangularjshtmlangular-material
user6800497
user6800497

Reputation:

How to use Angular Material radiobuttons in a html form

I'm trying to use AngularJS Material as my frontend framework currently I only have a simple form with three text input fields and one radio button group. Before i added angular material everything worked and now only the text input is submitted.

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

and my app.js

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

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

Upvotes: 0

Views: 1787

Answers (1)

Je.
Je.

Reputation: 54

Try something like this ;) (run code snippet)

In your case, replace ng-model='data.group1' by ng-model='project.group1', all ng-message by 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>

Upvotes: 1

Related Questions