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

Posted 2023-05-09

【中文标题】isValid 表单验证然后运行一个函数 AngularJS

【英文标题】：isValid Form vaildation then run a function AngularJS

【发布时间】：2017-03-06 12:39:27

【问题描述】：

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

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

任何指针将不胜感激。

亲切的问候，

【参考方案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) 
            ...