Pertanyaan Dalam angularjs, bagaimana mengatur fokus pada input pada pengiriman formulir jika input memiliki kesalahan?


Ini adalah kode saya dan saya ingin menetapkan fokus pada textbox nama pertama pada pengiriman formulir jika textbox nama depan memiliki kesalahan seperti $error.required,$error.pattern,$error.minlength atau $error.maxlength.

<form class="form-horizontal" name="clientForm" id="clientForm" novalidate ng-submit="clientForm.$valid" ng-class="{ loading:form.submitting }">
<div class="form-group">
    <label class="col-lg-2 control-label">First Name</label>
    <div class="col-lg-8">
        <input type="text" ng-model="client.firstName" class="form-control" required autofocus name="firstName" autocomplete="off" ng-maxlength="100" ng-minlength=3 ng-pattern="/^[a-zA-Z]*$/" />
        <!--<span ng-show="clientForm.firstName.$dirty && clientForm.firstName.$invalid" class="error">First Name is required.</span>-->
        <div class="errors" ng-show="clientForm.$submitted || clientForm.firstName.$touched">
            <div class="error" ng-show="clientForm.firstName.$error.required">
                First Name is required.
            </div>
            <div class="error" ng-show="clientForm.firstName.$error.pattern">
                Enter valid name.
            </div>
            <div class="error" ng-show="clientForm.firstName.$error.minlength">
                First Name is required to be at least 3 characters
            </div>
            <div class="error" ng-show="clientForm.firstName.$error.maxlength">
                First Name cannot be longer than 100 characters
            </div>
        </div>
    </div>
</div>
<button type="submit" class="btn btn-primary">Save</button></form>

4
2018-05-22 05:31


asal


Jawaban:


Pertanyaan ini merupakan duplikat dari: Tetapkan fokus pada masukan tidak valid pertama dalam formulir AngularJs

Anda dapat menggunakan arahan pada formulir:

<form accessible-form>
    ...    
</form>

app.directive('accessibleForm', function () {
    return {
        restrict: 'A',
        link: function (scope, elem) {

            // set up event handler on the form element
            elem.on('submit', function () {

                // find the first invalid element
                var firstInvalid = elem[0].querySelector('.ng-invalid');

                // if we find one, set focus
                if (firstInvalid) {
                    firstInvalid.focus();
                }
            });
        }
    };
});

Berikut adalah Plunker yang berfungsi: http://plnkr.co/edit/wBFY9ZZRzLuDUi2SyErC?p=preview


6
2018-05-22 06:35



Anda harus menangani ini menggunakan direktif. Sebagai contoh:

Ini akan iterate melalui elemen (s) dan periksa apakah focusNow atribut itu benar atau tidak. Pastikan kode pengendali kesalahan menetapkan ekspresi benar / salah.

.directive('focusNow', function ($timeout) {
    return {
        link: function (scope, element, attrs) {
            scope.$watch(attrs.focusNow, function (value) {
                if (value === true) {
                    for (var i = 0; i < element.length; i++) {
                        var ele = angular.element(element[i].parentNode);
                        if (!ele.hasClass('ng-hide')) { //Skip those elements which are hidden.
                            element[i].focus();
                        }
                    }
                }
            });
        }
    };
});

dan dalam HTML, Anda akan memiliki:

<input type="text" focus-now="expression" />

dimana expression akan menjadi ekspresi normal yang akan dievaluasi menjadi true jika terjadi kesalahan.


0
2018-05-22 05:55



Anda dapat mencoba ini: i.e menambahkan ng-focus="clientForm.$error" dalam masukan nama depan

<input type="text" ng-focus="clientForm.$invalid" ng-model="client.firstName" class="form-control" required autofocus name="firstName" autocomplete="off" ng-maxlength="100" ng-minlength=3 ng-pattern="/^[a-zA-Z]*$/" />

0
2018-05-22 05:35