プログラムでフォームフィールドをダーティに設定するAngular.js

フォームの一部のフィールドをプログラムで値で更新しています$dirty。フィールドの状態をに設定したいと思います。次のようなことをする：

$scope.myForm.username.$dirty = true; 動作していないようです。

$setPristineフィールドの状態をリセットする方法はありますが、方法はありません$setDirtyか？

では、これをどのように行うのでしょうか？

私はこの投稿https://groups.google.com/forum/#!topic/angular/NQKGAFlsln4を見ましたが、$setDirtyメソッドを見つけることができないようです。Angularバージョン1.1.5を使用しています。

AngularJS 1.3.4以降$setDirty()、フィールド（ソース）で使用できます。たとえば、エラーがあり、必須とマークされているフィールドごとに、次の操作を実行できます。

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

あなたの場合、$scope.myForm.username.$setViewValue($scope.myForm.username.$viewValue);トリックを行います-それはフォームとフィールドの両方をダーティにし、適切なCSSクラスを追加します。

正直なところ、あなたの質問のリンクからのトピックの新しい投稿でこの解決策を見つけました。それは私にとっては完璧に機能したので、簡単に見つけられるように、これをスタンドアロンの回答としてここに配置します。

編集：

上記のソリューションは、1.3.3までのAngularバージョンに最適です。1.3.4以降、$setDirty()から新しく公開されたAPIメソッドを使用する必要がありますngModel.NgModelController。

手動で設定する必要があります$dirtyにtrueして$pristineにfalseフィールドに。入力にクラスを表示する場合は、要素にクラスを手動で追加ng-dirtyおよび削除する必要ng-pristineがあります。$setDirty()フォームレベルでを使用して、フォーム自体でこれをすべて実行できますが、フォーム入力はできません。フォーム入力には$setDirty()、今述べたようにありません。

この回答は$setDirty()、入力に追加する必要があるため、将来変更される可能性があります。

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);

この問題を解決するあなたのためだけのjsFiddleを作成しました。単純に$ dirtyをtrueに設定しますが、$timeout 0DOMが読み込まれた後に実行されます。

ここでそれを見つけてください：JsFiddle

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

これは私のために働いたものです

$scope.form_name.field_name.$setDirty()

$setDirty();メソッドを使用できます。ドキュメントを参照してくださいhttps://docs.angularjs.org/api/ng/type/form.FormController

例：

$scope.myForm.$setDirty();

仕事をするヘルパー関数：

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

角度2

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

@rmagの回答に対する小さな追加メモ。ダーティにする空の必須フィールドがある場合は、次のようにします。

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

フィールドをダーティとマークしようとしている理由は正確にはわかりませんが、誰かが無効なフォームを送信しようとしたときに検証エラーを表示したかったため、同様の状況にありました。結局、jQueryを使用して.ng-pristineクラスタグを削除.ng-dirtyし、適切なフィールドにクラスタグを追加しました。例えば：

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