Угловой материал 0.9.7 Пример проверки формы

Question

Я хочу проверить форму, используя встроенные директивы angularjs и углового материала, включая сообщения под полем типа «вход, выбор», «радио».
Есть некоторые специфические требования:

• поле формы должно иметь равные высоты
• радио кнопки, т.е. md-radio должно быть встроенным
• расположение сообщений под полей должно быть подобно
• Угловые - выбор материала, то есть md-select должен быть шириной = 100%

Answer 1

Я создал этот fiddle для упомянутых требований. Я отправляю это здесь, чтобы помочь кому-то новое для angularjs или углового материала

<form name="myForm" ng-app="myApp" ng-controller="myController" class="container-fluid" ng-submit="submit()"> 
    <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" ng-disabled="myForm.$invalid">SUBMIT</md-button> 
</form> 

var app = angular 
    .module('myApp', ['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() { 
     // submit code goes here 
    }; 
    $scope.reset = function() { 
     $scope.obj = { 
     name: "", 
     myselect: "", 
     status: "" 
     } 
    } 
    $scope.reset(); 
    }); 

md-input-container > md-select { 
    margin-top: 0; 
    padding-bottom: 0; } 
md-input-container > md-select > md-select-label { 
    width: 100%; } 
md-input-container > md-radio-group { 
    padding: 24px 2px 0; } 
md-input-container > md-radio-group > md-radio-button { 
    margin: 8px 5px 0; 
    display: inline-block; } 

Update 1: создавший этот pen для углового 1.4.2 и углового материал v0.10.0

Answer 2

Я некоторые твик Салали Аслам ответ:

• представить кнопку включения
• Erorr сообщения не отображается на нетронутая форма
• Validate на отправить
• Validate на трогательном элементе

пример на JSFiddle и ниже.

HTML:

<form name="myForm" ng-app="myApp" ng-controller="myController" class="container-fluid" ng-submit="myForm.$valid && submit()" novalidate> 
    <div class="row"> 
    <div class="col-xs-8"> 
     <md-input-container md-is-error="myForm.name.$invalid && (myForm.$submitted || myForm.name.$dirty)"> 
     <label>Name</label> 
     <input name="name" id="name" ng-model="obj.name" ng-required="true"> 
     <div ng-messages="myForm.name.$error" ng-if="myForm.$submitted || myForm.name.$touched"> 
      <div ng-message="required">Campaign Name is required.</div> 
     </div> 
     </md-input-container> 
    </div> 
    <div class="col-xs-8"> 
     <md-input-container md-is-error="myForm.myselect.$invalid && (myForm.$submitted || myForm.myselect.$dirty)"> 
     <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" ng-if="myForm.$submitted || myForm.myselect.$touched"> 
      <div ng-message="required">myselect is required.</div> 
     </div> 
     </md-input-container> 
    </div> 
    <div class="col-xs-8"> 
     <md-input-container md-is-error="myForm.status.$invalid && (myForm.$submitted || myForm.status.$dirty)"> 
     <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" ng-if="myForm.$submitted || myForm.status.$touched"> 
      <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 type="submit" class="md-primary">SUBMIT</md-button> 
</form> 

JS:

var app = angular 
    .module('myApp', ['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() { 
     // submit code goes here 
    }; 
    $scope.reset = function() { 
     $scope.obj = { 
     name: "", 
     myselect: "", 
     status: "" 
     } 
    }; 
    $scope.reset(); 
    });