我想使用
angularjs和angular-material内置指令验证表单,包括字段下的消息,如输入,选择,单选按钮.
有一些具体要求:
有一些具体要求:
>表单字段应具有相同的高度
>单选按钮,即md-radio应该是内联的
>字段下的消息位置应该类似
>角度材料选择,即md-select应为宽度= 100%
我对Salal Aslam做了一些调整回答:
>启用提交按钮
> erorr消息未显示在未触摸的表单上
>验证提交
>验证触摸元素
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(); });