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()필드 ( source ) 에서 사용할 수 있습니다 . 예를 들어 오류가 있고 필수로 표시된 각 필드에 대해 다음을 수행 할 수 있습니다.

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 시작하면 새로 노출 된 API 방법을 사용해야 $setDirty()에서을 ngModel.NgModelController.

필드 에 대해 및 로 수동으로 설정 $dirty해야 합니다. 클래스가 입력에 나타나도록 하려면 요소에서 클래스 를 수동으로 추가 하고 제거 해야합니다 . 양식 수준에서를 사용 하여 양식 자체에서이 모든 작업을 수행 할 수 있지만 양식 입력은 불가능하며 현재 언급 한대로 양식 입력에는 없습니다 .true$pristinefalseng-dirtyng-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();
    }
}