Angular JS HTML5验证

发布时间：2020-12-17 17:17:46 所属栏目：安全来源：网络整理

导读：我有一个表单,我已经在我的输入上使用了所需的标签 – 这工作正常但在我的提交按钮上我有ng-click =“visible = false”,在提交数据时隐藏表单. 如果所有验证都正确的话,我怎么能把它设置为假？ App.js $scope.newBirthday = function(){ $scope.bdays.push(

我有一个表单,我已经在我的输入上使用了所需的标签 – 这工作正常但在我的提交按钮上我有ng-click =“visible = false”,在提交数据时隐藏表单.

如果所有验证都正确的话,我怎么能把它设置为假？

App.js

$scope.newBirthday = function(){

        $scope.bdays.push({name:$scope.bdayname,date:$scope.bdaydate});

        $scope.bdayname = '';
        $scope.bdaydate = '';

    };

HTML：

<form name="birthdayAdd" ng-show="visible" ng-submit="newBirthday()">
        <label>Name:</label>
        <input type="text" ng-model="bdayname" required/>
        <label>Date:</label>
        <input type="date" ng-model="bdaydate" required/>
        <br/>
        <button class="btn" ng-click="visible = false" type="submit">Save</button>
      </form>

解决方法

如果您为FormController提供一个名称,FormController将通过其名称在最近的控制器范围中公开.所以在你的情况下说你有一个类似的结构

<div ng-controller="MyController">
    <!-- more stuff here perhaps -->
    <form name="birthdayAdd" ng-show="visible" ng-submit="newBirthday()">
        <label>Name:</label>
        <input type="text" ng-model="bdayname" required/>
        <label>Date:</label>
        <input type="date" ng-model="bdaydate" required/>
        <br/>
        <button class="btn" ng-click="onSave()" type="submit">Save</button>
      </form>
</div>

现在在你的控制器中

function MyController($scope){
    // the form controller is now accessible as $scope.birthdayAdd

    $scope.onSave = function(){
        if($scope.birthdayAdd.$valid){
            $scope.visible = false;
        }
    }
}

如果表单内的输入元素有效,则表单有效.希望这可以帮助.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!