كيف يمكنني التحقق بشكل صحيح من صلاحية النموذج داخل المراقب عندما يتم تغيير بيانات النموذج خارج النموذج في angularjs؟

Question

ما زلت جديدًا تمامًا على AngularJS وأعتقد أنني أواجه مشكلة في فهم التوقيت باستخدام $scope.في وحدة التحكم، قمت بإعداد مراقب لبعض بيانات النموذج المرتبطة بعناصر النموذج المختلفة.يقوم المراقب بإطلاق طلب أياكس عندما تتغير البيانات، إلا إذا كان النموذج غير صالح.أنا أتحقق من صلاحية النموذج باستخدام myForm.$valid.كل هذا أمر بسيط جدًا، باستثناء عندما يتم تحديث بيانات النموذج في وحدة التحكم، وليس النموذج.يتم تشغيل عمليات التحقق من الصحة كما هو متوقع، ولكن النموذج $valid لا يزال يحتوي على القيمة السابقة، وليس ما ينبغي أن يكون عليه مع البيانات المحدثة.على سبيل المثال، إذا كان النموذج صالحًا مسبقًا، فقمت بحذف قيمة النموذج المرتبطة بالإدخال المطلوب، وسيتم تنشيط المراقب لأن بيانات النموذج قد تغيرت، ولكن عندما أقوم بتسجيل قيمة myForm.$valid، فإن قيمتها لا تزال صحيحة، على الرغم من أنه ينبغي أن يكون كاذبا.

لذلك سؤالي هو أ.لماذا يحدث هذا؟ ولكن الأهم ب.ما هي الطريقة الصحيحة للتعامل مع ما أحاول تحقيقه؟هل سيكون التوجيه المخصص منطقيًا؟

هنا مثال مبسط.

لغة البرمجة:

<div ng-controller="MyCtrl">
    <form name="myForm">
        <input type="text" name="myField" ng-model="myData" required>
        <button type="button" ng-click="myData=''">Delete</button>
    </form>

    <div>
        The watcher says the form is: <strong>{{ formStatus }}</strong>    
    </div>
</div>

مراقب:

myApp.controller('MyCtrl', ['$scope', function($scope) {
    $scope.myData = 'abc';
    $scope.formStatus = '';

    $scope.$watch('myData', function(newVal, oldVal) {
        if (newVal != oldVal) {
            console.log("my data changed");
            console.log("my form valid = ", $scope.myForm.$valid);        
            $scope.formStatus = $scope.myForm.$valid ? 'Valid' : 'Invalid';
        }
    });
}]);

كمان: http://jsfiddle.net/anpsince83/cK6cc/1/

Answer 1

التوجيه المخصص هو الطريق الصحيح للذهاب.يوصى عمومًا لعدة أسباب بوضع الساعات في التوجيهات مقابل وحدات التحكم.على مستوى عالٍ، أحد الأسباب هو أن Angular توصي بأن تكون وحدات التحكم رفيعة وتعمل فقط كحلقة وصل بين العرض والخدمات.لكنك تصل إلى سبب محدد ومثير للاهتمام.

يتم تشغيل وحدات التحكم قبل ربط التوجيهات Angular.لذلك تتم إضافة ساعة وحدة التحكم الخاصة بك إلى قائمة المراقبة قبل Angular ngModelWatch() يفعل ل myData. ngModelWatch() هو المكان الذي يعمل فيه Angular $formatters (يذكر ذلك $formatters, ، من بين أمور أخرى، هي المكان الذي يتم فيه تشغيل التحقق من الصحة عند حدوث تغيير في النموذج).

نظرًا لأنه يتم تنفيذ الساعات بالترتيب الذي تمت إضافتها به إلى قائمة المراقبة، فإن الخاص بك مراقب $watch ينفذ قبل التحقق من الصحة يجري من قبل $formatters.

إذا قمت بدلا من ذلك بوضع نفسه $watch داخل التوجيه ستتم إضافته أثناء الرابط بعد ذلك ngModelWatch() تمت إضافته إلى قائمة المراقبة.هكذا التوجيه $watch سيتم التنفيذ بعد التحقق من الصحة تم.

هنا كمان محدث حيث يمكنك مشاهدة ترتيب التنفيذ $formatters وكل $watch.وسترى أن إصدار التوجيه يعمل كما هو متوقع - بعد ذلك $formatters.