Angular.js programlı olarak bir form alanını kirli olarak ayarlama

Formumdaki bazı alanları bir değerle programlı olarak güncelliyorum ve alan durumunu olarak ayarlamak istiyorum $dirty. Şunun gibi bir şey yapmak:

$scope.myForm.username.$dirty = true; işe yaramıyor gibi görünüyor.

Bir yöntem yoktur $setPristineben alanı durumunu sıfırlamak için kullanabilirsiniz, ancak bir olmadığını $setDirtyyöntemi?

Peki bunu nasıl yapacaksın?

Bu gönderiyi https://groups.google.com/forum/#!topic/angular/NQKGAFlsln4 gördüm ama $setDirtyyöntemi bulamıyorum . Angular 1.1.5 sürümünü kullanıyorum.

AngularJS 1.3.4'ten beri $setDirty()alanlarda ( kaynak ) kullanabilirsiniz. Örneğin, hatalı ve zorunlu olarak işaretlenen her alan için aşağıdakileri yapabilirsiniz:

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

Sizin durumunuzda, $scope.myForm.username.$setViewValue($scope.myForm.username.$viewValue);hile yapar - hem formu hem de alanı kirli hale getirir ve uygun CSS sınıflarını ekler.

Dürüst olmak gerekirse, bu çözümü sorunuzdaki bağlantıdan konudaki yeni gönderide buldum. Benim için mükemmel çalıştı, bu yüzden bulunmasını kolaylaştırmak için bunu buraya bağımsız bir cevap olarak koyuyorum.

DÜZENLE:

Yukarıdaki çözüm, 1.3.3'e kadar olan Açısal sürüm için en iyi sonucu verir. 1.3.4 başlamak, yeni maruz API yöntemi kullanmalısınız $setDirty()dan ngModel.NgModelController.

alan için manuel $dirtyolarak trueve $pristineolarak ayarlamanız gerekecektir false. Sınıfların girişinizde görünmesini istiyorsanız, sınıfları el ile eklemeniz ng-dirtyve ng-pristineöğeden kaldırmanız gerekir . Sen kullanabilirsiniz $setDirty()forma kendisini tüm bu yapmak için form düzeyi üzerinde değil, formu girişleri, form girişleri şu anda yok $setDirty()bahsettiğin gibi.

Bu cevap, $setDirty()girdilere eklemeleri gerektiği için gelecekte değişebilir , mantıklı görünüyor.

NgModelController'a erişiminiz varsa (ona yalnızca bir direktiften erişebilirsiniz),

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

Sadece sizin için bu sorunu çözen bir jsFiddle yaptık. basitçe $ dirty değerini true olarak ayarlayın, ancak bir $timeout 0so ile DOM yüklendikten sonra çalışır.

Burada bulun: JsFiddle

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

Bu benim için çalıştı

$scope.form_name.field_name.$setDirty()

$setDirty();Yöntemi kullanabilirsiniz . Belgeleri inceleyin https://docs.angularjs.org/api/ng/type/form.FormController

Misal:

$scope.myForm.$setDirty();

İşi yapmak için yardımcı bir işlev:

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

Açısal 2

Aynı şeyi Angular 2'de yapmak isteyenler için, formu ele geçirmek dışında çok benzer.

<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
        }
    }
}

@ Rmag'ın cevabına küçük ek not. Boş ama kirli yapmak istediğiniz alanlarınız varsa bunu kullanın:

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

Alanları neden kirli olarak işaretlemeye çalıştığından tam olarak emin değilim, ama kendimi benzer bir durumda buldum çünkü birisi geçersiz bir form göndermeye çalıştığında doğrulama hatalarının görünmesini istedim. .ng-pristineSınıf etiketlerini kaldırmak .ng-dirtyve uygun alanlara sınıf etiketleri eklemek için jQuery'yi kullanmayı bıraktım . Örneğin:

$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();
    }
}