cari

Rumah  >  Soal Jawab  >  teks badan

angular.js - AngularJS使用自定义的表单验证指令后,输入内容不提交?

指令代码如下:

 var regex = /[\u4e00-\u9fa5\u3400-\u4db5\ue000-\uf8ff]/;
    app.directive("ifHanzi", function () {
        return {
            restrict: "A",
            scope:true,
            require: "ngModel",
            link: function (scope, ele, attrs, ngModelController) {
                ngModelController.$parsers.unshift(function (input) {
                    if (regex.test(input)) {
                        ngModelController.$setValidity('ifHanzi', true);
                    } else {
                        ngModelController.$setValidity('ifHanzi', false);
                    }
                });
            }
        }
    });

html代码如下:

<form name="iForm" ng-submit="Search(Input)">
    <p class="input-group">
        <input type="text" class="form-control" ng-model="Input" name="inputText" if-hanzi>
        <button class="btn btn-primary" type="submit>查询</button>                        
    </p>
    <span ng-show="iForm.inputText.$error.ifHanzi">提示:只能输入汉字进行查询!</span>
</form>

控制器代码:

app.controller('testCtrl',['$scope',function($scope){
    $scope.Search=function(Input){
        console.log(Input);//使用了表单验证指令后,Input就成了undefined
    }
}]);

验证是可以正常执行的,就是只要添加了自己写的这个“ifHanzi”指令,表单的提交内容在控制器中就拿不到,成了undefined,是我的指令写错了还是有其他没有注意到的地方,希望同学们指点一下,谢谢啦。

phpcn_u1582phpcn_u15822743 hari yang lalu557

membalas semua(1)saya akan balas

  • 过去多啦不再A梦

    过去多啦不再A梦2017-05-15 16:59:43

    Hanya keluarkan skop = benar dalam arahan Anda menggunakan skop bebas Asrama terputus, jadi anda perlu menggunakan telefon bimbit anda...


    Dikemas kini: 2015-12-13

    1. Pertama sekali, kerana apa yang anda require adalah arahan, iaitu, ngModel, dan arahan ini tidak mempunyai skop pengasingan, jika anda menetapkan scope = true, ia akan menyebabkan dalaman ngModel tidak dapat mengemas kini luaran < Nilai sepadan 🎜>. ngModelIni adalah perkara utama yang membawa kepada masalah di atas. Jadi hanya alih keluar pilihan konfigurasi ini. 2. Kaedah fungsi yang anda hantar ke
    tidak mengembalikan hasil selepas mengesahkan ngModel.$parsers, yang mengakibatkan nilai pada paparan tidak dihantar kepada model. Ia boleh diubah seperti berikut: ifHanzi

        if (regex.test(input)) {
            ngModelController.$setValidity('ifHanzi', true);
            return input; /* return the input */ 
        } else {
            ngModelController.$setValidity('ifHanzi', false);
        }

    Ini adalah punca kedua masalah.

    Semoga ini membantu.

    balas
    0
  • Batalbalas