Angular.js प्रोग्रामेटिक रूप से गंदे करने के लिए प्रपत्र फ़ील्ड सेट करते हैं

Question

मैं अपने फॉर्म पर कुछ फ़ील्ड्स को मान के साथ प्रोग्रामेटिक रूप से अपडेट कर रहा हूं और मैं फील्ड स्टेट को सेट करना चाहूंगा $dirty। कुछ ऐसा करना:

$scope.myForm.username.$dirty = true; काम करने के लिए प्रतीत नहीं होता है।

एक विधि है $setPristineजो मैं क्षेत्र की स्थिति को रीसेट करने के लिए उपयोग कर सकता हूं लेकिन कोई $setDirtyविधि नहीं है ?

तो ऐसा करने के बारे में कोई कैसे जाता है?

मैंने इस पोस्ट को https://groups.google.com/forum/# .topic/angular /NQKGAFlsln4 देखा, लेकिन मैं इस $setDirtyविधि का पता नहीं लगा सकता । मैं कोणीय संस्करण 1.1.5 का उपयोग कर रहा हूं।

Comments

क्या आपको केवल कुछ (डिफ़ॉल्ट) मान सेट करने की आवश्यकता हो सकती है?

— 4

$ SetDirty विधि यहाँ प्रलेखित है: docs.angularjs.org/api/ng.directive:form.FormController

— डेविड लिन

एक रूप स्तर पर लगता है। मुझे $setDirtyफील्ड लेवल पर जरूरत है।

— सुपर 9

यहाँ एक अंग पर जा रहा है, लेकिन एक संभव है, लेकिन इसके बजाय hacky, इसका समाधान यह पता लगाना होगा कि घटना श्रोता कोणीय इस प्रकार के क्षेत्र में बाँधने के लिए क्या उपयोग करता है, और अद्यतन के तुरंत बाद उस श्रोता को मैन्युअल रूप से आग देगा। </ uglyHack>

— bguiz

मैं प्रोग्रामिक रूप से क्लास बदलने की सोच रहा था लेकिन यह सही तरीके से फॉर्म फील्ड की स्थिति को नहीं बदलेगा जो मैंने सोचा होगा ...

— सुपर 9

Answer 1

AngularJS 1.3.4 के बाद से आप $setDirty()खेतों ( स्रोत ) पर उपयोग कर सकते हैं । उदाहरण के लिए, त्रुटि वाले प्रत्येक क्षेत्र के लिए और आवश्यक के रूप में आप निम्न कार्य कर सकते हैं:

angular.forEach($scope.form.$error.required, function(field) {
    field.$setDirty();
});

Answer 2

आपके मामले में, $scope.myForm.username.$setViewValue($scope.myForm.username.$viewValue);क्या चाल है - यह फ़ॉर्म और फ़ील्ड दोनों को गंदा करता है, और उपयुक्त सीएसएस कक्षाओं को जोड़ता है।

बस ईमानदार होने के लिए, मुझे आपके प्रश्न के लिंक से विषय में नई पोस्ट में यह समाधान मिला। यह मेरे लिए पूरी तरह से काम करता है, इसलिए मैं इसे एक स्टैंडअलोन जवाब के रूप में यहां डाल रहा हूं ताकि इसे ढूंढना आसान हो सके।

संपादित करें:

उपरोक्त समाधान 1.3.3 तक कोणीय संस्करण के लिए सबसे अच्छा काम करता है। 1.3.4 के साथ शुरू आप नव उजागर एपीआई विधि का उपयोग करना चाहिए $setDirty()से ngModel.NgModelController।

Comments

यह मेरे लिए एंगुलर 1.3.0-बीटा 5 और 1.3.0 के बीच परिवर्तन प्रतीत होता है, जहां 1.3.0 तब तक $ प्रिस्टाइन रखता है जब तक कि $ व्यूवल्यू नहीं बदलता। मुझे करना पड़ा $scope.myForm.myField.$pristine = false; $scope.myForm.myField.$setViewValue(...)। नीचे दिए गए उत्तर की तरह लग रहा है कि field.$setDirty()कोणीय 1.3.4 में जोड़ा गया बेहतर समाधान होगा

— जोहान

अपने नोट के लिए धन्यवाद, आपने मेरा दिन "1.3.3 तक बचा लिया। 1.3.4 से शुरू होकर आपको नई उजागर एपीआई पद्धति का उपयोग करना चाहिए"

— अहमद महमूद

उपयोगकर्ता rmag, और कोणीय 2 के बारे में क्या?

— user5260143

Answer 3

आप मैन्युअल रूप से सेट करना होगा $dirtyकरने के लिए trueऔर $pristineकरने के लिए falseक्षेत्र के लिए। यदि आप चाहते हैं कि कक्षाएं आपके इनपुट पर दिखाई दें, तो आपको तत्वों ng-dirtyको ng-pristineकक्षाओं से मैन्युअल रूप से जोड़ना और निकालना होगा । आप $setDirty()प्रपत्र स्तर पर प्रपत्र पर यह सब करने के लिए प्रपत्र स्तर पर उपयोग कर सकते हैं , लेकिन प्रपत्र इनपुट नहीं, प्रपत्र इनपुट वर्तमान $setDirty()में आपके पास उल्लेख के अनुसार नहीं हैं।

यह उत्तर भविष्य में बदल सकता है क्योंकि उन्हें $setDirty()इनपुट में जोड़ना चाहिए , तार्किक लगता है।

Comments

$ setPristine () इनपुट-फ़ील्ड स्तर पर है, लेकिन अभी भी 1.2.26 में $ $ नहीं है :-(

— सेबस्टियन

Answer 4

यदि आपके पास NgModelController तक पहुंच है (आप केवल एक निर्देश से इस तक पहुंच प्राप्त कर सकते हैं) तो आप कॉल कर सकते हैं

ngModel.$setViewValue("your new view value");
// or to keep the view value the same and just change it to dirty
ngModel.$setViewValue(ngModel.$viewValue);

Comments

धन्यवाद! ठीक वही जो मेरे द्वारा खोजा जा रहा था।

— dreyln

Answer 5

सिर्फ आपके लिए एक jsField बनाया है जो इस मुद्दे को हल करता है। बस $ गंदे को सही सेट करें, लेकिन $timeout 0डोम लोड होने के बाद यह चलता है।

इसे यहाँ खोजें: JsFiddle

$timeout(function () {
  $scope.form.uName.$dirty = true;
}, 0);

Answer 6

इसी से मेरा काम बना है

$scope.form_name.field_name.$setDirty()

Answer 7

आप $setDirty();विधि का उपयोग कर सकते हैं । प्रलेखन देखें https://docs.angularjs.org/api/ng/type/form.FormController

उदाहरण:

$scope.myForm.$setDirty();

Answer 8

कार्य करने के लिए एक सहायक कार्य:

function setDirtyForm(form) {
    angular.forEach(form.$error, function(type) {
        angular.forEach(type, function(field) {
            field.$setDirty();
        });
    });
    return form;
}

Comments

अरे, मैं दुर्भाग्य से गलती से इसे कम कर दिया। मैं इसे कैसे वापस लाऊं मुझे बता तो मैं उत्तर के बिना ऐसा नहीं कर सकते संपादित किया जा रहा ..

— SMK

यह अच्छी तरह से काम करता है; 'फॉर्म। $ त्रुटि' की जाँच के रूप में upvoting, यह सुनिश्चित करता है कि हम 'डर्टिफ़ाइंग' फ़ील्ड नहीं कर रहे हैं जिसे उपयोगकर्ता स्पर्श नहीं करता था, लेकिन जो मान्य हैं।

— सैम टी

धन्यवाद! आसान और सरल उपाय। सबसे तेज़ नहीं हो सकता है, लेकिन यह कुछ भी भारी नहीं करता है इसलिए यह वास्तव में कोई फर्क नहीं पड़ता। अच्छा कार्य!

— जवांगलोफ

Answer 9

कोणीय 2

कोणीय 2 में भी ऐसा ही देखने की चाहत रखने वालों के लिए यह फॉर्म की पकड़ से अलग है

<form role="form" [ngFormModel]="myFormModel" (ngSubmit)="onSubmit()" #myForm="ngForm">
<div class="form-group">
    <label for="name">Name</label>
    <input autofocus type="text" ngControl="usename" #name="ngForm" class="form-control" id="name" placeholder="Name">
    <div [hidden]="name.valid || name.pristine" class="alert alert-danger">
        Name is required
    </div>
</div>
</form>
<button type="submit" class="btn btn-primary" (click)="myForm.ngSubmit.emit()">Add</button>

---

import { Component, } from '@angular/core';
import { FormBuilder, Validators } from '@angular/common';

@Component({
    selector: 'my-example-form',
    templateUrl: 'app/my-example-form.component.html',
    directives: []
})
export class MyFormComponent {
    myFormModel: any;

    constructor(private _formBuilder: FormBuilder) {
        this.myFormModel = this._formBuilder.group({
            'username': ['', Validators.required],
            'password': ['', Validators.required]
        });
    }

    onSubmit() {
        this.myFormModel.markAsDirty();
        for (let control in this.myFormModel.controls) {
            this.myFormModel.controls[control].markAsDirty();
        };

        if (this.myFormModel.dirty && this.myFormModel.valid) {
            // My submit logic
        }
    }
}

Answer 10

@ Rmag के उत्तर के लिए छोटा अतिरिक्त नोट। यदि आपके पास खाली लेकिन आवश्यक फ़ील्ड हैं जो आप इसे गंदा उपयोग करना चाहते हैं:

$scope.myForm.username.$setViewValue($scope.myForm.username.$viewValue !== undefined 
    ? $scope.myForm.username.$viewValue : '');

Comments

यह जवाब है कि आखिरकार मेरी मदद की!

— कर्क लीमोहोन

Answer 11

मुझे यकीन नहीं है कि आप खेतों को गंदा करने की कोशिश क्यों कर रहे हैं, लेकिन मैंने खुद को एक समान स्थिति में पाया क्योंकि मैं चाहता था कि जब कोई अमान्य फॉर्म जमा करने का प्रयास करे तो मैं सत्यापन त्रुटियां दिखाऊं। मैंने .ng-pristineवर्ग टैग हटाने और .ng-dirtyउचित क्षेत्रों में वर्ग टैग जोड़ने के लिए jQuery का उपयोग किया । उदाहरण के लिए:

$scope.submit = function() {
    // `formName` is the value of the `name` attribute on your `form` tag
    if (this.formName.$invalid)
    {
        $('.ng-invalid:not("form")').each(function() {
            $(this).removeClass('ng-pristine').addClass('ng-dirty');
        });
        // the form element itself is index zero, so the first input is typically at index 1
        $('.ng-invalid')[1].focus();
    }
}

Comments

यह देखते हुए कि हम पहले से ही AngularJS का उपयोग कर रहे हैं, एक jQuery समाधान ओवरकिल लगता है। कई लोग उदाहरण के लिए, AngularJS के साथ jQuery का उपयोग नहीं करना पसंद करते हैं।

— StevenClontz