ng-click angularjs 폼 검증

ng-click angularjs 폼 검증

기존 답변에서 해결책을 찾을 수 없어 글을 올립니다.

입력 필드가 많은 폼을 가지고 있는데, 그 중 많은 입력 필드가 필요합니다.

이 폼에는 버튼(2개 이상)이 있으며 ng-click을 사용하여 컨트롤러의 기능에 연결됩니다.

기능이 실행되기 전에 ng-click으로 폼의 유효성을 확인해야 합니다.

기본적으로 양식 검증은 함수 실행 후에 수행됩니다.필수 필드를 채우지 않으면 함수를 실행할 수 없습니다.

나는 바이올린을 만들었다.https://jsfiddle.net/z1uyyqg9/

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.name=undefined;
        $scope.preview = function(){
            alert("Previewed");
        };
        $scope.update = function(){
            alert("Updated");
        }
    });
</script>

<div ng-app="myApp" ng-controller="myCtrl">

    <form>
        <input type="text" ng-model='name' required>
        <button ng-click='preview()'>Preview</button>
        <button ng-click='update()'>Update</button>
    </form>

</div>

매우 간단한 해결책은 폼에 이름을 붙여서 참조할 수 있도록 하고 나서ng-click폼이 유효한 경우에만 기동합니다.

<form name="myform">
    <input type="text" ng-model='name' ng-required="true" />
    <button ng-click="myform.$valid && preview()">Preview</button>
    <button ng-click="myform.$valid && update()">Update</button>
</form>

포크 바이올린 : https://jsfiddle.net/r8d1uq0L/

검증(비즈니스상의 문제)을 뷰에서 분리하는 것을 좋아합니다.이를 위해 코드 내에서 모델 구속조건을 정의하고 표준 Angular 형식 검증과 함께 프로그램 검증을 사용할 수 있는 egkyron을 만들었습니다.

어떤 종류의 필수 메시지를 표시할 수 있도록 플래그를 설정하거나 형식이 유효하지 않은 경우 몇 가지 css 클래스를 설정할 수 있습니다.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name=undefined;
    $scope.showMsgs = false;
    $scope.preview = function(form){
        if ($scope[form].$valid) {
            alert("Previewed");
        } else {
            $scope.showMsgs = true;
        }
    };
    $scope.update = function(form){
        if ($scope[form].$valid) {
            alert("Updated");
        } else {
            $scope.showMsgs = true;
        }    
    };
});

.error {
  border-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

    <form name="myform" novalidate ng-init="disabled=false">
        <p ng-show="showMsgs && myform.name.$error.required">This field is required</p>
        <input type="text" name="name" ng-model='name' ng-required="!disabled" ng-disabled="disabled" ng-class="{error: showMsgs && myform.name.$error.required}" />
        
        <button ng-click="preview('myform')">Preview</button>
        <button ng-click="update('myform')">Update</button>
        <button ng-click="disabled=!disabled">toggle disabled</button>
    </form>

</div>

언급URL : https://stackoverflow.com/questions/31159006/form-validation-on-ng-click-angularjs