Angular Material 0.9.7 表单验证示例

Question

我想使用 angularjs 和 angular-material 内置指令验证表单，包括字段下的消息，例如输入、选择、单选按钮。
有一些具体要求：

• 表单字段的高度应相同
• 单选按钮，例如 md-radio 应该是内联的
• 字段下消息的位置应该相似
• 角度材料选择，即md-select 应为宽度 = 100%

Answer 1

我对 Salal Aslam 的回答做了一些调整：

• 提交按钮已启用
• 错误消息不会显示在未修改的表单上
• 提交时验证
• 在触摸元素时验证

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();
  });

Answer 2

我为提到的要求创建了这个fiddle。我在这里发布这个是为了帮助刚接触 angularjs 或 angular-material 的人

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

fiddle link

更新 1：为 angular 1.4.2 和 angular-material v0.10.0 创建了这个 pen