27

このコードを考えると：

<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/

4

6 に答える 6

7

にアタッチできるディレクティブを作成できます<a class="btn"...。このjsfiddleを確認してください

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

下部のリンクに追加し<input type='submit' id='clickMe'...てリンクしたことに注意してください<a class='btn' linked="clickMe"...

于 2012-08-12T18:38:11.850 に答える
3 
    for (control of $scope.[form name].$$controls) {
        control.$setDirty();
        control.$validate();
    }

上記のコードを試すことができます。送信する前に実行してください。

于 2017-02-24T10:13:14.027 に答える
2

理想的には、フォーム全体で検証を再実行するプログラムによる方法があるでしょう。私はそれを完全に調査していませんが、ユーザーが個々のコントロールを操作することなく、スコープ内のさまざまなデータに基づいて複数のコントロールを再検証する必要がある状況がありました。これは、フォームに 2 つのアクション ボタンがあり、それぞれがクリックされたときに異なる検証ルールを実行する必要があるために発生しました。

再検証の強制を完全に実装する前に、UI 要件が変更されましたが、フォームのデータをコピーしてから再設定することで、必要なもののほとんどを取得できました。これにより、現在のスコープ内のフォーム全体で再検証が強制されました。基本的に、それは次の行に沿っています（テストされていませんが、機能していたコードから取得されました）。この場合、フォームのデータは 1 つのオブジェクトのプロパティにバインドされています。

var formData = $parse(<form's model>); 
var dataCopy = angular.copy( formData($scope) ); 
formData.assign( $scope, dataCopy );
于 2013-03-25T20:35:26.143 に答える
1

これは受け入れられる場合と受け入れられない場合がありますが、フォームが完了するまで [送信] ボタンが無効になっていることを回避できる場合は、次のようにすることができます。

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

また、これが IE9 で機能することも注目に値します (心配な場合)。

于 2014-08-13T18:44:08.683 に答える
0

フォームに名前を付けます:

<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
})

アンギュラードキュメント

フォームの外部でブラウザー フォームの動作をトリガーする方法はありません。これは手動で行う必要があります。

于 2013-09-13T21:07:31.447 に答える
0

私のフォームフィールドは、フィールドが無効で、ユーザーが触れた場合にのみ検証メッセージを表示するため:

<!-- 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;
}
于 2015-09-11T23:45:08.497 に答える