isValid 表单验证然后运行一个函数 AngularJS答案

【问题标题】：isValid Form vaildation then run a function AngularJSisValid 表单验证然后运行一个函数 AngularJS
【发布时间】：2017-03-06 12:39:27
【问题描述】：

只是想知道如果AngularJS表单有效，是否有人可以给我一些关于运行函数的指示。

如果表单无效，则会出现错误，但如果表单在单击提交按钮后有效，我希望它移动到表单中的下一步（多步表单），所以基本上点击一个按钮来验证, 如果有效，它会打开一个新选项卡或展开式等。

任何指针将不胜感激。

亲切的问候，

【问题讨论】：

标签： javascript jquery angularjs forms validation

【解决方案1】：

你可以这样做：

html:

<form name="myForm">
    <div id="step1">
        <button type="button" ng-click="nextStep(form, validateStepOne, 2)">Next step</button>
    </div>
    <div id="step2">...</div>
    <div id="step3">...</div>
</form>

js:

function validateStepOne() {
    // validate form one and return true or false
}

function nextStep(form, validation, nextStepIndex) {
    if(form.$valid && validation()) {
        // go to next step
    }
}

【讨论】：

【解决方案2】：

如果表单无效，您可以尝试禁用按钮

<button (click)="submit()" [disabled]="!contactForm.form.valid" type="submit" class="btn btn-primary">Submit</button>

表单标签的样子

<form #contactForm="ngForm"> ...

或者如果你不想禁用按钮并从代码中检查是否有效，可能像

<button (click)="submit($event, contactForm)" class="btn btn-primary">Submit</button>

关于提交功能

submit(event:any, contactForm:NgForm): void {
        event.preventDefault();
        if (contactForm.form.valid) {
            ...
        }
    }

【讨论】：