Angular.js প্রোগ্রামিয়ালি ফর্ম ফিল্ডটি ময়লা করে নিচ্ছে


105

আমি প্রোগ্রাম হিসাবে আমার ফর্মের কিছু ক্ষেত্রকে একটি মান দিয়ে আপডেট করছি এবং আমি ক্ষেত্রের স্থিতিতে সেট করতে চাই $dirty। এরকম কিছু করা:

$scope.myForm.username.$dirty = true; কাজ মনে হচ্ছে না।

$setPristineক্ষেত্রের অবস্থা পুনরায় সেট করতে আমি একটি পদ্ধতি ব্যবহার করতে পারি তবে একটি $setDirtyপদ্ধতি নেই?

সুতরাং কেউ কিভাবে এটি করতে যায়?

আমি এই পোস্টটি https://groups.google.com/forum/#!topic/angular/NQKGAFlsln4 দেখেছি কিন্তু আমি $setDirtyপদ্ধতিটি খুঁজে পাচ্ছি বলে মনে হচ্ছে না । আমি কৌনিক সংস্করণটি 1.1.5 ব্যবহার করছি।


আপনার কি কিছু (ডিফল্ট) মান সেট করা দরকার হতে পারে?
চেরনিভ

3
এখানে $ setDirty পদ্ধতিটি নথিভুক্ত করা হয়েছে: docs.angularjs.org/api/ng.directive:form.FormController
ডেভিড লিন

2
মনে হচ্ছে এটি একটি ফর্ম স্তরে রয়েছে। আমার $setDirtyমাঠ পর্যায়ে দরকার
9

এখানে একটি অঙ্গ চলছে, তবে একটি সম্ভাব্য, বরং হ্যাকি, এর সমাধান হ'ল ইভেন্ট শ্রোতা কৌনিকটি এই ধরণের ক্ষেত্রে আবদ্ধ হওয়ার জন্য কী ব্যবহার করে এবং আপডেটের সাথে সাথেই শ্রোতাকে ম্যানুয়ালি ফায়ার করে। </uglyHack>
বুগুইজ

উত্তর:


51

যেহেতু AngularJS 1.3.4 আপনি $setDirty()ক্ষেত্রগুলিতে ( উত্স ) ব্যবহার করতে পারেন । উদাহরণস্বরূপ, ত্রুটিযুক্ত এবং চিহ্নিত চিহ্নিত প্রতিটি ক্ষেত্রের জন্য আপনি নিম্নলিখিতটি করতে পারেন:

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

87

আপনার ক্ষেত্রে, $scope.myForm.username.$setViewValue($scope.myForm.username.$viewValue);কৌশলটি কি - এটি ফর্ম এবং ক্ষেত্র উভয়কেই নোংরা করে তোলে এবং উপযুক্ত সিএসএস ক্লাস যুক্ত করে।

কেবল সত্য বলতে, আমি আপনার প্রশ্নের লিঙ্ক থেকে এই বিষয়টিকে নতুন পোস্টে খুঁজে পেয়েছি। এটি আমার পক্ষে নিখুঁতভাবে কাজ করেছে, সুতরাং এটি সন্ধান সহজতর করার জন্য আমি এটি এখানে একক উত্তর হিসাবে রাখছি।

সম্পাদনা করুন:

উপরের সমাধানটি কৌনিক সংস্করণের জন্য 1.3.3 অবধি সবচেয়ে ভাল কাজ করে। 1.3.4 দিয়ে শুরু করে আপনার $setDirty()কাছ থেকে নতুন উন্মুক্ত এপিআই পদ্ধতিটি ব্যবহার করা উচিত ngModel.NgModelController


এটি আমার জন্য কৌণিক 1.3.0-beta5 এবং 1.3.0 এর মধ্যে পরিবর্তিত হয়েছে বলে মনে হয়েছিল, যেখানে 1.3.0 ক্ষেত্রটিকে $ ভিউভ্যালু পরিবর্তন না করে ততক্ষণ আদিম রাখে। আমাকে করতে হয়েছিল $scope.myForm.myField.$pristine = false; $scope.myForm.myField.$setViewValue(...)। দেখে মনে হচ্ছে নীচের উত্তরটি উল্লেখ করে যে field.$setDirty()কৌণিক 1.3.4 এ যুক্ত করা হয়েছে এটি আরও ভাল সমাধান হবে
জোহান

4
আপনার নোটের জন্য ধন্যবাদ আপনি আমার দিনটি "1.3.3 পর্যন্ত" রক্ষা করেছিলেন। 1.3.4 দিয়ে শুরু করে আপনার নতুন উন্মুক্ত এপিআই পদ্ধতিটি ব্যবহার করা উচিত "
আহমেদ মাহমুদ

ব্যবহারকারী আরএমএজি, এবং কৌণিক 2 সম্পর্কে কী?
ব্যবহারকারী5260143

17

আপনি নিজে সেট করতে হবে $dirtyকরতে trueএবং $pristineকরতে falseক্ষেত্রের জন্য। আপনি যদি চান যে ক্লাসগুলি আপনার ইনপুটটিতে প্রদর্শিত হয়, তবে আপনাকে উপাদান থেকে ম্যানুয়ালি যোগ করতে হবে ng-dirtyএবং মুছে ফেলতে হবে ng-pristine। আপনি $setDirty()ফর্ম পর্যায়ে এগুলি করতে ফর্ম পর্যায়ে ব্যবহার করতে পারেন , তবে ফর্মের ইনপুটগুলি নয়, ফর্ম ইনপুটগুলি বর্তমানে $setDirty()আপনার উল্লিখিত হিসাবে নেই।

$setDirty()যুক্তিযুক্ত বলে মনে হচ্ছে ভবিষ্যতে এই উত্তরগুলি তাদের ইনপুটগুলিতে যুক্ত করা উচিত বলে পরিবর্তন হতে পারে ।


3
P সেটপ্রিসটাইন () ইনপুট-ফিল্ড স্তরে রয়েছে তবে এখনও 1.2.26 :-( এ সেটডার্ট নেই
সেবাস্তিয়ান

10

আপনার যদি এনজিএমডেলকন্ট্রোলারের অ্যাক্সেস থাকে (আপনি কেবল এটির নির্দেশিকা থেকে অ্যাক্সেস পেতে পারেন) তবে আপনি কল করতে পারবেন

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

ধন্যবাদ! ঠিক আমি খুঁজছেন ছিল কি.
ড্রিলেন

10

আপনার জন্য কেবল একটি jsFiddle তৈরি করে যা এই সমস্যাটিকে সমাধান করে। কেবলমাত্র $ নোংরা সত্যকে সেট করুন, তবে $timeout 0এটি ডম লোড হওয়ার পরে চলে।

এটি এখানে সন্ধান করুন: জেএসফিডাল

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

6

এটিই আমার পক্ষে কাজ করেছিল

$scope.form_name.field_name.$setDirty()


5

কাজটি করার জন্য একটি সহায়ক ফাংশন:

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

আরে দুর্ভাগ্যক্রমে আমি এটাকে কমিয়ে দিয়েছি। আমি কীভাবে তা ফিরিয়ে দেব। সুতরাং আমাকে বলছি উত্তর সম্পাদনা করা ছাড়া আমি এটি করতে পারি না
স্মোক

এটি ভাল কাজ করে; 'ফর্মের জন্য পরীক্ষা করা' হিসাবে উত্সাহ দেওয়া 'ত্রুটিটি নিশ্চিত করে যে আমরা ব্যবহারকারীর স্পর্শ না করে এমন ক্ষেত্রগুলি' নির্ধারণ 'করছি না, তবে যা বৈধ which
স্যাম টি

ধন্যবাদ! সহজ এবং সহজ সমাধান। দ্রুততম নাও হতে পারে তবে এটি ভারী কিছু করে না তাই এটি সত্যিই ইমোর কোনও বিষয় নয়। ভাল কাজ!
jwanglof

4

কৌণিক ঘ

কৌনিক 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
        }
    }
}

3

@ Rmag এর উত্তরে ছোট্ট অতিরিক্ত নোট। আপনার যদি খালি তবে প্রয়োজনীয় ক্ষেত্রগুলি থাকে যা আপনি নোংরা ব্যবহার করতে চান:

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

এই উত্তরটি আমাকে অবশেষে সাহায্য করেছিল!
কર્ક লিমোহন

-1

আপনি কেন ক্ষেত্রগুলিকে নোংরা হিসাবে চিহ্নিত করার চেষ্টা করছেন তা আমি নিশ্চিত নই, তবে আমি নিজেকে একইরকম অবস্থায় পেয়েছি কারণ যখন কেউ কোনও অবৈধ ফর্ম জমা দেওয়ার চেষ্টা করেছিল তখন আমি বৈধতা ত্রুটিগুলি প্রদর্শন করতে চেয়েছিলাম। .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();
    }
}

5
প্রদত্ত যে আমরা ইতিমধ্যে AngularJS ব্যবহার করছি, একটি jQuery সমাধান ওভারকিল বলে মনে হচ্ছে। উদাহরণস্বরূপ, অনেকে AngularJS এর ​​সাথে jQuery ব্যবহার না করা পছন্দ করেন।
স্টিভেনক্লন্টজ 21
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.