我正在制作一个角度材料的网站，除了表格输入的验证外，它的工作效果很好 .
当我在输入框中输入内容时，所有错误消息（必需，最小长度和最大长度）都显示在彼此顶部的相同位置 .
这是角质材料中的错误还是我做错了什么？
这是我的问题的简化版本，只使用默认的StarterApp示例，在主页面内容中输入表单 . 如果您运行它并在文本框中键入内容，您应该会看到问题 . 谢谢你的帮忙 .
<html lang="en" ng-app="StarterApp">
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
<meta name="viewport" content="initial-scale=1" />
</head>
<body layout="column" ng-controller="AppCtrl">
<md-toolbar layout="row">
<div class="md-toolbar-tools">
<md-button ng-click="toggleSidenav('left')" hide-gt-sm class="md-icon-button">
<md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg"></md-icon>
</md-button>
<h1>Hello World</h1>
</div>
</md-toolbar>
<div layout="row" flex>
<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
</md-sidenav>
<div layout="column" flex id="content">
<md-content layout="column" flex class="md-padding">
<form name="userForm">
<md-input-container>
<label>Username</label>
<input name="username" ng-model="data.username" required md-maxlength="20" minlength="3">
<div ng-messages="userForm.username.$error" ng-show="userForm.username.$dirty">
<div ng-message="required">This field is required</div>
<div ng-message="md-maxlength">Your username can not be longer than 20 characters</div>
<div ng-message="minlength">Your username can not be shorter than 3 characters</div>
</div>
</md-input-container>
{{data.username}}
</form>
</md-content>
</div>
</div>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.js"></script>
<!-- custom stuff -->
<style>
.md-toolbar-tools h1 {
font-size: inherit;
font-weight: inherit;
margin: inherit;
}
</style>
<script>
var app = angular.module('StarterApp', ['ngMaterial']);
app.controller('AppCtrl', ['$scope', '$mdSidenav',
function($scope, $mdSidenav) {
$scope.data = {
username: ""
};
$scope.toggleSidenav = function(menuId) {
$mdSidenav(menuId).toggle();
};
}
]);
</script>
</body>
</html>
1 回答
问题在于angular-material.min.css文件 . md-input-container在该文件中的位置是绝对的 . 添加自己的css并将位置设置为relative而不是absolute . 为这些div添加了内联样式，以便您可以看到