각도를 수동으로 트리거하는 방법폼 태그 외부에 있는 버튼에서 JS 유효성 검사를 수행하시겠습니까?

각도를 수동으로 트리거하는 방법폼 태그 외부에 있는 버튼에서 JS 유효성 검사를 수행하시겠습니까?

이 코드를 지정하면:

<div ng-controller="MyCtrl">
    <form ng-submit="onSubmitted()">

    Header inputs:
        <input type="name" ng-model="sample" required/>
        <input type="name" ng-model="sampleX" required/>

        <input type="submit" value="This submit triggers validation. But I wanted to put this button at the end of the page"/>
    </form>

    <hr/>

    Some other form here. Think line items

    <hr />
    <a class="btn" ng-click="/* what could should be put here, so this can trigger the firt form's validation, then submit? */">Wanted this submit button to trigger the validation+submit on the form in which this button doesn't belong</a>


</div>


var app = angular.module('myApp', []);

function MyCtrl($scope) {

    $scope.onSubmitted = function() {
        alert('submitted!');
    };
}

첫 번째 폼에서 마지막 버튼을 눌러 유효성 확인(그 후 유효할 때 제출)을 시작했으면 합니다.현재 양식 내의 버튼만 해당 양식의 유효성 확인 및 제출을 트리거할 수 있습니다.양식 밖에 있는 버튼으로 할 수 있는 방법이 있나요?

라이브 테스트 : http://jsfiddle.net/dzjV4/1/

디렉티브를 생성하여 다음에 첨부할 수 있습니다.<a class="btn"...이 jsfiddle을 확인합니다.

http://jsfiddle.net/dzjV4/2/

에 추가한 주의사항<input type='submit' id='clickMe'...아래에 있는 링크와 연결했습니다.<a class='btn' linked="clickMe"...

    for (control of $scope.[form name].$$controls) {
        control.$setDirty();
        control.$validate();
    }

위의 코드를 사용해 보십시오.송신하기 전에 실행하도록 해 주세요.

양식 전체에 걸쳐 검증을 재실행할 수 있는 프로그램적인 방법이 있는 것이 이상적입니다.완전히 조사하지는 않았지만 사용자가 개별 컨트롤과 상호 작용하지 않고 스코프 내의 다른 데이터를 기반으로 여러 컨트롤을 재검증해야 하는 상황이 있었습니다.이는 폼에 두 개의 액션버튼이 있어 클릭 시 각각 다른 검증 규칙을 실행해야 했기 때문입니다.

UI 요건은 재검증을 실시하기 전에 변경되었지만, 재검증을 실시하기 전에 폼의 데이터를 복사하고 다시 설정함으로써 필요한 대부분을 얻을 수 있었습니다.이것에 의해, 현재의 범위내의 폼 전체에 걸쳐 재검증이 필요하게 되었습니다.기본적으로 다음과 같습니다(테스트는 하지 않고 동작하고 있던 코드로부터 취득).이 경우 폼의 데이터는 한 개체의 속성에 바인딩되었습니다.

var formData = $parse(<form's model>); 
var dataCopy = angular.copy( formData($scope) ); 
formData.assign( $scope, dataCopy );

이는 허용할 수도 있고 허용되지 않을 수도 있지만, 폼이 완료될 때까지 [SUMBIT]버튼을 무효로 할 수 있는 경우는, 다음과 같이 할 수 있습니다.

<form name="formName">
 <input ng-required="true" />
</form>
<button ng-click="someFunction()" ng-disabled="formName.$invalid" />

또, IE9 로 동작하는 것도 주의할 필요가 있습니다(걱정되는 경우).

양식 이름 지정:

<div ng-controller="MyCtrl">
    <form name="myForm">
        <input name="myInput" />
    </form>
</div>

따라서 스코프의 폼 검증 상태에 액세스 할 수 있습니다.

app.controller('MyCtrl', function($scope) {
    $scope.myForm.$valid // form valid or not
    $scope.myForm.myInput // input valid or not
    // do something with myForm, e.g. display a message manually
})

각진 문서

양식 외부에서 브라우저 양식 동작을 트리거할 수 없습니다.이거 수동으로 해야 돼요.

[폼(Form)]필드는 필드가 비활성화되어 사용자가 터치한 경우에만 확인 메시지를 표시하므로 다음과 같이 됩니다.

<!-- form field -->
<div class="form-group" ng-class="{ 'has-error': rfi.rfiForm.stepTwo.Parent_Suffix__c.$touched && rfi.rfiForm.stepTwo.Parent_Suffix__c.$invalid }">

    <!-- field label -->
    <label class="control-label">Suffix</label>
    <!-- end field label -->
    <!-- field input -->
    <select name="Parent_Suffix__c" class="form-control"
        ng-options="item.value as item.label for item in rfi.contact.Parent_Suffixes"
        ng-model="rfi.contact.Parent_Suffix__c" />
    <!-- end field input -->
    <!-- field help -->
    <span class="help-block" ng-messages="rfi.rfiForm.stepTwo.Parent_Suffix__c.$error" ng-show="rfi.rfiForm.stepTwo.Parent_Suffix__c.$touched">
        <span ng-message="required">this field is required</span>
    </span>  
    <!-- end field help -->
</div>
<!-- end form field -->

버튼에 의해 트리거된 이 코드를 사용하여 비활성 필드를 표시할 수 있었습니다.

// Show/trigger any validation errors for this step
angular.forEach(vm.rfiForm.stepTwo.$error, function(error) {
    angular.forEach(error, function(field) {
        field.$setTouched();
    });
});
// Prevent user from going to next step if current step is invalid
if (!vm.rfiForm.stepTwo.$valid) {
    isValid = false;
}

언급URL : https://stackoverflow.com/questions/11920482/how-to-manually-trigger-angularjs-validation-from-a-button-outside-of-the-form-t