我创建了一个我的问题的独立案例:http: //plnkr.co/edit/6LXW5TG76LC9LNSrdpQC
以下是孤立案例的代码:
<!DOCTYPE html>
<html ng-app="App">
<head></head>
<body ng-controller="ExampleController">
<form name="form" ng-submit="submit()" novalidate>
<input type="number" name="number" ng-model="number" required><br>
<span ng-show="form.number.$error.required && form.number.$touched">Required<br></span>
<span ng-show="form.number.$error.number">Not a number<br></span>
<input type="submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script>
var App = angular.module('App', []);
App.controller('ExampleController', function($scope) {
$scope.submit = function() {
alert('send to server: ' + $scope.number);
}
});
App.run();
</script>
</body>
</html>
基本上,该示例包含一个数字字段,其下方是错误消息,显示输入无效时(空或不是数字).
但是表单仍然会提交,虽然如果字段值无效,字段值设置为'undefined',我宁愿在发送到服务器之前检查表单是否有效(本例中的警告框).
所以我的问题是 - 在AngularJS中,有没有办法检查一个表单是否在控制器内有效？或者另一种阻止表单无效的提交方式？
我有一个Button组件（在 React 中），它可以是一个button或一个a元素，具体取决于是否将hrefprop 传递给组件。类似于下面的东西：
const Button = ({ children, href, onClick }) => {
if(href) {
return <a href={href} onClick={onClick}>{children}</a>;
}
return <button type="button" onClick={onClick}>{children}</button>;
};
我以前使用 Sass 来设计这些组件的样式，但现在我试图转移到styled-components. 但是，我遇到了一个问题，即这两个元素需要相同的样式，但 的语法styled-components要求我创建分隔变量 -styled.button和styled.a，每个元素都有重复的样式。
我想知道是否有一种方法可以动态更改 中使用的元素styled-components，也许基于道具以与更改单个 CSS 属性相同的方式？我尝试了以下方面的内容：
const StyledButton = styled((props) => props.href ? 'a' : 'button')`
...
`;
但到目前为止还没有运气。任何建议将不胜感激。
我有一些类似于以下的脚本:
var breakpoints = [0,240,480,960,9999],
bpCount = breakpoints.length,
windowsize = 0;
window.onresize = function() {
windowsize = document.body.clientWidth;
for(var i=0; i<bpCount; i++) {
if(windowsize >= breakpoints[i] && windowsize < breakpoints[i+1]) {
doSomething(breakpoints[i]);
break;
}
}
};
然而,这似乎运行得相当慢,即使在一台不错的PC上的Chrome中,即使'doSomething'只是执行'console.log',所以我只是想知道是否有更好的方法来检查屏幕大小是否是两个值之间的大小调整？
谢谢