Angular.js setzt programmgesteuert ein Formularfeld auf Dirty

Ich aktualisiere programmgesteuert einige Felder in meinem Formular mit einem Wert und möchte den Feldstatus auf setzen $dirty. So etwas tun wie:

$scope.myForm.username.$dirty = true; scheint nicht zu funktionieren.

Es gibt eine Methode $setPristine, mit der ich den Status des Feldes zurücksetzen kann, aber es gibt keine $setDirtyMethode?

Wie macht man das?

Ich habe diesen Beitrag https://groups.google.com/forum/#!topic/angular/NQKGAFlsln4 gesehen, aber ich kann die $setDirtyMethode nicht finden . Ich verwende Angular Version 1.1.5.

Seit AngularJS 1.3.4 können Sie $setDirty()Felder ( Quelle ) verwenden. Für jedes fehlerhafte und als erforderlich gekennzeichnete Feld können Sie beispielsweise Folgendes tun:

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

In Ihrem Fall ist $scope.myForm.username.$setViewValue($scope.myForm.username.$viewValue);dies der Trick - es macht sowohl das Formular als auch das Feld schmutzig und fügt entsprechende CSS-Klassen hinzu.

Um ehrlich zu sein, habe ich diese Lösung in einem neuen Beitrag im Thema über den Link aus Ihrer Frage gefunden. Es hat perfekt für mich funktioniert, daher setze ich dies hier als eigenständige Antwort ein, um das Auffinden zu erleichtern.

BEARBEITEN:

Die obige Lösung funktioniert am besten für die Angular-Version bis 1.3.3. Ab 1.3.4 sollten Sie die neu verfügbar gemachte API-Methode $setDirty()von verwenden ngModel.NgModelController.

Sie müssen manuell eingestellt $dirtyauf trueund $pristineum falsefür das Feld. Wenn die Klassen in Ihrer Eingabe angezeigt werden sollen, müssen Sie Klassen manuell zum Element hinzufügen ng-dirtyund daraus entfernen ng-pristine. Sie können dies $setDirty()auf Formularebene verwenden, um all dies auf dem Formular selbst zu tun, jedoch nicht auf den Formulareingaben. Formulareingaben verfügen derzeit nicht über die $setDirty()von Ihnen erwähnten Formulareingaben .

Diese Antwort kann sich in Zukunft ändern, da sie $setDirty()zu den Eingaben hinzugefügt werden sollte. Dies erscheint logisch.

Wenn Sie Zugriff auf den NgModelController haben (Sie können nur über eine Direktive darauf zugreifen), können Sie aufrufen

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

Ich habe eine jsFiddle nur für Sie erstellt, die dieses Problem löst. Setzen Sie einfach $ dirty auf true, aber mit a wird $timeout 0es ausgeführt, nachdem DOM geladen wurde.

Finden Sie es hier: JsFiddle

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

Das hat bei mir funktioniert

$scope.form_name.field_name.$setDirty()

Sie können $setDirty();Methode verwenden. Siehe Dokumentation https://docs.angularjs.org/api/ng/type/form.FormController

Beispiel:

$scope.myForm.$setDirty();

Eine Hilfsfunktion für die Arbeit:

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

Winkel 2

Für alle, die dasselbe in Angular 2 tun möchten, ist es sehr ähnlich, abgesehen davon, dass sie das Formular in den Griff bekommen

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

Kleine zusätzliche Anmerkung zu @ rmags Antwort. Wenn Sie leere, aber erforderliche Felder haben, die Sie verschmutzen möchten, verwenden Sie Folgendes:

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

Ich bin mir nicht sicher, warum Sie versuchen, die Felder als schmutzig zu markieren, aber ich befand mich in einer ähnlichen Situation, weil ich wollte, dass Validierungsfehler angezeigt werden, wenn jemand versucht, ein ungültiges Formular einzureichen. Am Ende habe ich jQuery verwendet, um die .ng-pristineKlassen-Tags zu entfernen und .ng-dirtyden entsprechenden Feldern Klassen-Tags hinzuzufügen . Beispielsweise:

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