Question

我有一个表格，我使用AngularJS Material进行编码，并希望添加一些表格验证。以下是我的代码片段：

  <form name="hrRequestForm">
    <div layout="row">
        <md-input-container class="md-block" flex-gt-xs>
            <label>Title</label>
            <input name="textInput" id="textInput" ng-model="inputVal" required>
            <div ng-message="hrRequestForm.textInput.$error" role="alert">
                <div ng-message="required">This is required.</div>
            </div>
        </md-input-container>
    </div>
</form>

当我点击输入并保持不输入任何内容时，验证工作正常。发生这种情况时，输入下方会显示错误消息，输入变为红色，这是完美的。

如果我打开表单只需按提交而不填写任何内容，那么无效。我希望这种情况也会点亮错误信息，但没有任何反应。

我已阅读了很多帖子，说要在novalidate标记上添加ng-submit和<form>。我已经尝试过了，它仍然没有做任何事情。目前，我有一个ng-click = "c.submit()"的md按钮，并通过jquery攻击一些验证错误样式：

c.submit = function(){
    var validEntry = true;
    if($('#textInput').val() == ''){
        $('#textInput').css('border-color', 'rgb(221,44,0)');   
        validEntry = false;
    }

虽然这有效，但它并不理想，我一般都很好奇为什么我的验证不起作用。有人能引导我朝正确的方向发展吗？谢谢！

AngularJS材质表单验证onSubmit

0 个答案: