当输入无效时，Angular 2 Parsley 阻止表单提交答案

【问题标题】：Angular 2 Parsley Prevent Form Submission When Input is Invalid当输入无效时，Angular 2 Parsley 阻止表单提交
【发布时间】：2016-07-21 10:55:23
【问题描述】：

      <div>
            <form class="form-horizontal form-label-left parsleyjs" method="post" data-parsley-priority-enabled="false"
                (ngSubmit)="submitForm()">
                <fieldset>
                    <div class="form-group row">
                        <label class="form-control-label col-md-3 col-xs-12" for="task-id">
                            ID
                            <span class="help-block"> 
                                Number Only
                            </span>
                        </label>
                        <div class="col-md-9 col-xs-12">
                            <input type="text" id="task-id" name="task-id" class="form-control"
                                data-parsley-type="number"
                                required="required">
                        </div>
                    </div>
                </fieldset>
                <div class="form-actions">
                    <button type="submit" id="task-detail-submit-button" class="btn btn-danger btn-rounded pull-xs-right">Submit</button>
                </div>
            </form>
        </div>

当输入无效时，Parsley 如何在表单提交期间停止调用“submitForm()”。在这种情况下，“task-id”不是数字。

【问题讨论】：

stackoverflow.com/questions/38446956/… 的副本

标签： angularjs angular parsley.js

【解决方案1】：

希望这段代码能给你一个想法

        <form class="form-horizontal form-label-left parsleyjs"   name="formname" method="post" data-parsley-priority-enabled="false"
            (ngSubmit)="formname.valid && formname.submitForm()">

此代码未经测试，如果它不起作用，抱歉

【讨论】：

这确实有效，我现在刚刚测试过。我的用例是用户可以选择更改简单的disabled HTML 指令并提交无效的表单。添加此位会阻止 Angular 提交表单，以防用户尝试对其进行操作并强制它在触发函数之前使其有效。